Category Archives: BackboneJS

Simple BackboneJS code (Part 6)

Posted on by

Use MarionetteJS to simplify solution

<html>

<head>
<style>
table {
  border: 1px solid black;
  border-collapse: collapse;
}
table td {
  width: 60px;
  border: 1px solid black;
}
table tr {
  border: 1px solid black;
}
</style>
</head>

<body>
  <script id="table-row-template" type="text/template">
    <td>
      <div>
        <%= name %><br>
        <%= price %>
      </div>
    </td>
  </script>
  </script>
  <div id="tableid">
  </div>
  <br>
  <p>Total: <span id="totalPrice"></span></p>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
  <script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>
  <script src="http://marionettejs.com/downloads/backbone.marionette.min.js"></script>
  <script>
  $(function() {
    var storeItemModel = Backbone.Model.extend({
      default: {
        name: "default",
        price: 0.0,
        isSelected: false
      }
    });

    var storeItemView = Backbone.Marionette.ItemView.extend({
      tagName: 'tr',
      modelEvents: {
        'change': 'modelChanged'
      },
      template: "#table-row-template",
      events: {
        'mouseenter': 'mouseEntered',
        'mouseleave': 'mouseleft',
        'click': 'clicked'
      },
      ui: {
        div: "div"
      },
      onRender: function(){
        if(this.model.get("isSelected") == true) {
          this.ui.div.css("background-color", "33CC99");
        }
      },
      modelChanged: function() {
        this.render();
        this.trigger('calculateTotalPrice');
      },
      mouseEntered: function() {
        if(this.model.get("isSelected") == false)
          this.ui.div.css("background-color", "ACC4E6");
      },
      mouseleft: function() {
        if(this.model.get("isSelected") == false)
          this.ui.div.css("background-color", "white");
      },
      clicked: function(e) {
        //prevent the default click behavior
        e.preventDefault();
        var isSelected = this.model.get("isSelected");
        isSelected = this.model.get("isSelected") === false ? true : false;
        this.model.set("isSelected", isSelected);
      }
    });

    var storeItemCollection = Backbone.Collection.extend({
      model: storeItemModel
    });

    var listOfStoreItems = new storeItemCollection([
      new storeItemModel({
        name: "towels",
        price: 10.99,
        isSelected: false
      }),
      new storeItemModel({
        name: "toys",
        price: 7.99,
        isSelected: false
      })
      ]);

      var AppView = Marionette.CollectionView.extend({
        initialize: function () {
          this.updatePrice();
        },
        tagName:'table',
        childView: storeItemView,
        onRender: function(){
          $("#tableid").append(this.el);
        },
        modelEvents: {
          'change': 'updatePrice'
        },
        updatePrice: function () {
          var totalPrice = this.model.get("totalPrice");
          $("#totalPrice").html(totalPrice);
        },
        childEvents: {
          calculateTotalPrice: function() {
            var totalPrice = 0;
            listOfStoreItems.each(function(model){
              var isSelected = model.get("isSelected");
              if(isSelected === true)
                totalPrice += model.get("price");
              }, this);
              this.model.set("totalPrice", totalPrice);
          }
        }
      });

      var AppModel = Backbone.Model.extend({
        default: {
          totalPrice: 0
        }
      });
      var App = new AppView({
        collection: listOfStoreItems,
        model: new AppModel({totalPrice: 0})
      });

      App.render();
    });
  </script>
</body>

</html>

https://github.com/randcode-generator/SimpleBackboneJSApp/blob/b7013aadbb96e9cb4035b712d5b4e427ed452167/BackboneJSApp.html

Simple BackboneJS code (Part 5)

Posted on by

Uses templates

<html>

<head>
<style>
table {
  border: 1px solid black;
  border-collapse: collapse;
}
table td {
  width: 60px;
  border: 1px solid black;
}
table tr {
  border: 1px solid black;
}
</style>
</head>

<body>
  <script id="table-row-template" type="text/template">
    <td>
      <div>
        <%= name %><br>
        <%= price %>
      </div>
    </td>
  </script>
  </script>
  <table id="table">
  </table>
  <br>
  <p>Total: <span id="totalPrice"></span></p>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
  <script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>
  <script>
  $(function() {
    var storeItemModel = Backbone.Model.extend({
      default: {
        name: "default",
        price: 0.0,
        isSelected: false
      }
    });

    var storeItemView = Backbone.View.extend({
      tagName: 'tr',
      initialize: function() {
        this.listenTo(this.model, 'change', this.render);
      },
      events: {
        'mouseenter': 'mouseEntered',
        'mouseleave': 'mouseleft',
        'click': 'clicked'
      },
      render: function() {
        //Remember, the <tr> is already included
        //because we specified 'tr' in tagName
        var data = {name: this.model.get('name'), price: this.model.get('price')};
        var template = _.template($("#table-row-template").html());
        var html = template(data);
        this.$el.html(html);

        if(this.model.get("isSelected") == true) {
          this.$el.find("div").css("background-color", "33CC99");
        }

        return this;
      },
      mouseEntered: function() {
        if(this.model.get("isSelected") == false)
          this.$el.find("div").css("background-color", "ACC4E6");
      },
      mouseleft: function() {
        if(this.model.get("isSelected") == false)
          this.$el.find("div").css("background-color", "white");
      },
      clicked: function(e) {
        //prevent the default click behavior
        e.preventDefault();
        var isSelected = this.model.get("isSelected");
        isSelected = this.model.get("isSelected") === false ? true : false;
        this.model.set("isSelected", isSelected);
      }
    });

    var storeItemCollection = Backbone.Collection.extend({
      model: storeItemModel
    });

    var listOfStoreItems = new storeItemCollection([
      new storeItemModel({
        name: "towels",
        price: 10.99,
        isSelected: false
      }),
      new storeItemModel({
        name: "toys",
        price: 7.99,
        isSelected: false
      })
      ]);

      var AppModel = Backbone.Model.extend({
        default:{
          total:0
        }
      });

      var App = Backbone.View.extend({
        render: function() {
          var table = $("#table");
          listOfStoreItems.each(function(model) {
            var view = new storeItemView({
              model: model
            });
            table.append(view.render().el);
            this.listenTo(model, 'change', this.calculatePrice);
          }, this);
        },
        calculatePrice: function() {
          var totalPrice = 0;
          listOfStoreItems.each(function(model){
            var isSelected = model.get("isSelected");
            if(isSelected === true)
              totalPrice += model.get("price");
            }, this);
            this.model.set("total", totalPrice);
            $("#totalPrice").html(this.model.get("total"));
          }
      });

      new App({model: new AppModel({total: 0})}).render();
    });
  </script>
</body>

</html>

https://github.com/randcode-generator/SimpleBackboneJSApp/blob/93d7540494f2804a104991a4c418625d5dda8549/BackboneJSApp.html

Simple BackboneJS code (Part 4)

Posted on by

Calculate the total price when item is clicked

<html>

<head>
<style>
table {
  border: 1px solid black;
  border-collapse: collapse;
}
table td {
  width: 60px;
  border: 1px solid black;
}
table tr {
  border: 1px solid black;
}
</style>
</head>

<body>
  <table id="table">
  </table>
  <br>
  <p>Total: <span id="totalPrice"></span></p>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
  <script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>
  <script>
  $(function() {
    var storeItemModel = Backbone.Model.extend({
      default: {
        name: "default",
        price: 0.0,
        isSelected: false
      }
    });

    var storeItemView = Backbone.View.extend({
      tagName: 'tr',
      initialize: function() {
        this.listenTo(this.model, 'change', this.render);
      },
      events: {
        'mouseenter': 'mouseEntered',
        'mouseleave': 'mouseleft',
        'click': 'clicked'
      },
      render: function() {
        //Remember, the <tr> is already included
        //because we specified 'tr' in tagName
        this.$el.html("<td><div>" +
        this.model.get('name') + "<br>" +
        this.model.get('price') +
        "</div></td>");

        if(this.model.get("isSelected") == true) {
          this.$el.find("div").css("background-color", "33CC99");
        }

        return this;
      },
      mouseEntered: function() {
        if(this.model.get("isSelected") == false)
          this.$el.find("div").css("background-color", "ACC4E6");
      },
      mouseleft: function() {
        if(this.model.get("isSelected") == false)
          this.$el.find("div").css("background-color", "white");
      },
      clicked: function(e) {
        //prevent the default click behavior
        e.preventDefault();
        var isSelected = this.model.get("isSelected");
        isSelected = this.model.get("isSelected") === false ? true : false;
        this.model.set("isSelected", isSelected);
      }
    });

    var storeItemCollection = Backbone.Collection.extend({
      model: storeItemModel
    });

    var listOfStoreItems = new storeItemCollection([
      new storeItemModel({
        name: "towels",
        price: 10.99,
        isSelected: false
      }),
      new storeItemModel({
        name: "toys",
        price: 7.99,
        isSelected: false
      })
      ]);

      var AppModel = Backbone.Model.extend({
        default:{
          total:0
        }
      });

      var App = Backbone.View.extend({
        render: function() {
          var table = $("#table");
          listOfStoreItems.each(function(model) {
            var view = new storeItemView({
              model: model
            });
            table.append(view.render().el);
            this.listenTo(model, 'change', this.calculatePrice);
          }, this);
        },
        calculatePrice: function() {
          var totalPrice = 0;
          listOfStoreItems.each(function(model){
            var isSelected = model.get("isSelected");
            if(isSelected === true)
              totalPrice += model.get("price");
            }, this);
            this.model.set("total", totalPrice);
            $("#totalPrice").html(this.model.get("total"));
          }
      });

      new App({model: new AppModel({total: 0})}).render();
    });
  </script>
</body>

</html>

https://github.com/randcode-generator/SimpleBackboneJSApp/blob/9b487e583cd180dde3a02e77fd962b7977835934/BackboneJSApp.html

Simple BackboneJS code (Part 3)

Posted on by

Added click event and saves the state

<html>

<head>
<style>
table {
  border: 1px solid black;
  border-collapse: collapse;
}
table td {
  width: 60px;
  border: 1px solid black;
}
table tr {
  border: 1px solid black;
}
</style>
</head>

<body>
  <table id="table">
  </table>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
  <script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>
  <script>
  $(function() {
    var storeItemModel = Backbone.Model.extend({
      default: {
        name: "default",
        price: 0.0,
        isSelected: false
      }
    });

    var storeItemView = Backbone.View.extend({
      tagName: 'tr',
      initialize: function() {
        this.listenTo(this.model, 'change', this.render);
      },
      events: {
        'mouseenter': 'mouseEntered',
        'mouseleave': 'mouseleft',
        'click': 'clicked'
      },
      render: function() {
        //Remember, the <tr> is already included
        //because we specified 'tr' in tagName
        this.$el.html("<td><div>" +
        this.model.get('name') + "<br>" +
        this.model.get('price') +
        "</div></td>");

        if(this.model.get("isSelected") == true) {
          this.$el.find("div").css("background-color", "33CC99");
        }

        return this;
      },
      mouseEntered: function() {
        if(this.model.get("isSelected") == false)
          this.$el.find("div").css("background-color", "ACC4E6");
      },
      mouseleft: function() {
        if(this.model.get("isSelected") == false)
          this.$el.find("div").css("background-color", "white");
      },
      clicked: function(e) {
        //prevent the default click behavior
        e.preventDefault();
        var isSelected = this.model.get("isSelected");
        isSelected = this.model.get("isSelected") === false ? true : false;
        this.model.set("isSelected", isSelected);
      }
    });

    var storeItemCollection = Backbone.Collection.extend({
      model: storeItemModel
    });

    var listOfStoreItems = new storeItemCollection([
      new storeItemModel({
        name: "towels",
        price: 10.99,
        isSelected: false
      }),
      new storeItemModel({
        name: "toys",
        price: 7.99,
        isSelected: false
      })
      ]);

      var App = Backbone.View.extend({
        initialize: function() {
          var table = $("#table");
          listOfStoreItems.each(function(model) {
            var view = new storeItemView({
              model: model
            });
            table.append(view.render().el);
          }, this);
        }
      });

      new App();
    });
  </script>
</body>

</html>

https://github.com/randcode-generator/SimpleBackboneJSApp/blob/c688398d5edb6a069beed980c638a4388be6573c/BackboneJSApp.html

Simple BackboneJS code (Part 2)

Posted on by

Added mouse entered and leave to the view

<html>
<head>
  <style>
    table {
      border: 1px solid black;
    }
    table td {
      width: 60px;
      border: 1px solid black;
    }
    table tr {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <table id="table">
  </table>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
  <script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>
  <script>
    $(function() {
      var storeItemModel = Backbone.Model.extend({
        default: {
          name: "default",
          price: 0.0
        }
      });

      var storeItemView = Backbone.View.extend({
        tagName: 'tr',
        events: {
          'mouseenter': 'mouseEntered',
          'mouseleave': 'mouseleft'
        },
        render: function() {
          //Remember, the <tr> is already included
          //because we specified 'tr' in tagName
          this.$el.html("<td><div>" +
            this.model.get('name') +
            "</div></td>");

          return this;
        },
        mouseEntered: function() {
          this.$el.find("div").css("background-color", "ACC4E6");
        },
        mouseleft: function() {
          this.$el.find("div").css("background-color", "white");
        }
      });

      var storeItemCollection = Backbone.Collection.extend({
        model: storeItemModel
      });

      var listOfStoreItems = new storeItemCollection([
        new storeItemModel({
          name: "towels",
          price: 10.99
        }),
        new storeItemModel({
          name: "toys",
          price: 7.99
        })
      ]);

      var App = Backbone.View.extend({
        initialize: function() {
          var table = $("#table");
          listOfStoreItems.each(function(model) {
            var view = new storeItemView({
              model: model
            });
            table.append(view.render().el);
          }, this);
        }
      });

      new App();
    });
  </script>
</body>

</html>

https://github.com/randcode-generator/SimpleBackboneJSApp/blob/f8fec2239f1dc829ee7a260a264199a263223d07/BackboneJSApp.html

Simple BackboneJS code (Part 1)

Posted on by

Simple BackboneJS code that adds two items to a table

<html>

<head>
   <style>
      table {
         border: 1px solid black;
      }
      table td {
         width: 60px;
         border: 1px solid black;
      }
      table tr {
         border: 1px solid black;
      }
   </style>
</head>

<body>
   <table id="table">
   </table>
   <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
   <script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
   <script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>
   <script>
      $(function() {
         var storeItemModel = Backbone.Model.extend({
            default: {
               name: "default",
               price: 0.0
            }
         });

         var storeItemView = Backbone.View.extend({
            render: function() {
               return "<tr><td>" +
                  this.model.get('name') +
                  "</td></tr>";
            }
         });

         var storeItemCollection = Backbone.Collection.extend({
            model: storeItemModel
         });

         var listOfStoreItems = new storeItemCollection([
            new storeItemModel({
               name: "towels",
               price: 10.99
            }),
            new storeItemModel({
               name: "toys",
               price: 7.99
            })
         ]);

         var App = Backbone.View.extend({
            initialize: function() {
               var table = $("#table");
               listOfStoreItems.each(function(model) {
                  var view = new storeItemView({
                     model: model
                  });
                  table.append(view.render());
               }, this);
            }
         });

         new App();
      });
   </script>
</body>
</html>