use multi-line strings instead of concatenation

garthcn · Mar 2, 2013 · 7a1801b · 7a1801b
1 parent 79433f0
commit 7a1801b
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 46 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@ assets
 deploy
 .DS_Store
 test.sh
-dudefile.js
+dudefile.js
+.sass-cache
diff --git a/js/list-collection.js b/js/list-collection.js
@@ -24,15 +24,15 @@ C.listCollection = {
 
     render: function () {
 
-        this.el = $('<div id="list-collection" class="collection">'
-                        + '<div class="credit">Made by Evan You <br> Original iOS app by Realmac</div>'
-                        + '<div class="item dummy-item top list-item empty">'
-                            + '<div class="slider" style="background-color:rgb(23,128,247)"><div class="inner">'
-                                + '<span class="title">Pull to Create List</span>'
-                                + '<div class="count">0</div>'
-                            + '</div></div>'
-                        + '</div>'
-                    + '</div>');
+        this.el = $('<div id="list-collection" class="collection">\
+                        <div class="credit">Made by Evan You <br> Original iOS app by Realmac</div>\
+                        <div class="item dummy-item top list-item empty">\
+                            <div class="slider" style="background-color:rgb(23,128,247)"><div class="inner">\
+                                <span class="title">Pull to Create List</span>\
+                                <div class="count">0</div>\
+                            </div></div>\
+                        </div>\
+                    </div>');
 
         this.style = this.el[0].style;
 

diff --git a/js/list-item.js b/js/list-item.js
@@ -49,17 +49,15 @@
 
         render: function () {
 
-            this.el = $('<div class="item list-item'
-                + (this.count ? '' : ' empty')
-                + '">'
-                    + '<div class="slider">'
-                        + '<div class="inner">'
-                            + '<span class="title"><span class="text">' + this.data.title + '</span></span>'
-                            + '<div class="count">' + this.count + '</div>'
-                            + '<input class="field" type="text" value="' + this.data.title + '">'
-                        + '</div>'
-                    + '</div>'
-                + '</div>');
+            this.el = $('<div class="item list-item' + (this.count ? '' : ' empty') + '">\
+                    <div class="slider">\
+                        <div class="inner">\
+                            <span class="title"><span class="text">' + this.data.title + '</span></span>\
+                            <div class="count">' + this.count + '</div>\
+                            <input class="field" type="text" value="' + this.data.title + '">\
+                        </div>\
+                    </div>\
+                </div>');
 
             this.countEl =this.el.find('.count');
 

diff --git a/js/todo-collection.js b/js/todo-collection.js
@@ -20,20 +20,20 @@ C.TodoCollection.prototype = {
 
     render: function () {
 
-        this.el = $('<div class="collection">'
-                + '<div class="top-switch">'
-                    + '<img class="arrow" src="img/arrow.png"> <span class="text">Switch To Lists</span>'
-                + '</div>'
-                + '<div class="bottom-switch">'
-                    + '<div class="drawer"><img class="arrow-small" src="img/arrow-small.png"></div>'
-                    + '<span class="text">Pull to Clear</span>'
-                + '</div>'
-                + '<div class="item dummy-item top">'
-                    + '<div class="slider" style="background-color:rgb(235,0,23)"><div class="inner">'
-                        + '<span class="title">Pull to Create Item</span>'
-                    + '</div></div>'
-                + '</div>'
-            + '</div>');
+        this.el = $('<div class="collection">\
+                <div class="top-switch">\
+                    <img class="arrow" src="img/arrow.png"> <span class="text">Switch To Lists</span>\
+                </div>\
+                <div class="bottom-switch">\
+                    <div class="drawer"><img class="arrow-small" src="img/arrow-small.png"></div>\
+                    <span class="text">Pull to Clear</span>\
+                </div>\
+                <div class="item dummy-item top">\
+                    <div class="slider" style="background-color:rgb(235,0,23)"><div class="inner">\
+                        <span class="title">Pull to Create Item</span>\
+                    </div></div>\
+                </div>\
+            </div>');
 
         this.style = this.el[0].style;
 

diff --git a/js/todo-item.js b/js/todo-item.js
@@ -32,17 +32,17 @@
 
         render: function () {
 
-            this.el = $('<div class="item todo-item' + (this.data.done ? ' done' : '') + '" style="z-index:' + this.data.order + '">'
-                    + '<div class="slider">'
-                        + '<div class="inner">'
-                            + '<span class="title">'
-                                + '<span class="text">' + this.data.title + '</span>'
-                                + '<span class="line"></span>'
-                            + '</span>'
-                            + '<input class="field" type="text" value="' + this.data.title + '">'
-                        + '</div>'
-                    + '</div>'
-                + '</div>');
+            this.el = $('<div class="item todo-item' + (this.data.done ? ' done' : '') + '" style="z-index:' + this.data.order + '">\
+                    <div class="slider">\
+                        <div class="inner">\
+                            <span class="title">\
+                                <span class="text">' + this.data.title + '</span>\
+                                <span class="line"></span>\
+                            </span>\
+                            <input class="field" type="text" value="' + this.data.title + '">\
+                        </div>\
+                    </div>\
+                </div>');
 
             this.lineStyle = this.el.find('.line')[0].style;
             if (this.data.done) this.lineStyle.width = '100%';