/templates/backbone-products.html
HTML | 259 lines | 202 code | 54 blank | 3 comment | 0 complexity | a5d11a094135a3eead9bcf7f266d4959 MD5 | raw file
- {% extends 'index.html' %}
- {% block backbone %}
- <script src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.min.js"></script>
- <script src="/static/js/underscore-1.5.2-min.js"></script>
- <script src="/static/js/backbone-1.1-min.js"></script>
-
- <script>
- (function($){
- //Create a model
- Product = Backbone.Model.extend({
- idAttribute:'_id',
- });
-
- //Create a collection
- Products = Backbone.Collection.extend({
- Model: Product,
- url: "#"
- });
- //Initiate a collection
- products = new Products();
- //Define Home View
- HomeView = Backbone.View.extend({
-
- el: 'body',
- initialize: function() {
- this.template = _.template($('#item-home').html());
- this.render();
- },
- render: function() {
- var el = this.$el
- el.empty();
- el.append(this.template());
- var listView = new ListView({collection:products});
- $('.products_table').append(listView.render().el);
- return this;
- }
- });
- //Define List View -List all products in the collection
- ListView = Backbone.View.extend({
-
- tagName: 'table',
- className : 'products_table table',
- initialize: function() {
- this.collection.bind('all', _.bind(this.render,this));
- this.template = _.template($('#item-list').html());
- },
- events: {
- "click .remove":"remove",
- "click .edit":"edit"
- },
- remove:function(e){
- e.preventDefault();
- var id = $(e.currentTarget).data("id");
- var item = this.collection.get(id);
- this.collection.remove(item);
- return this;
- },
- edit:function(e){
- e.preventDefault();
- var id = $(e.currentTarget).data("id");
- var item = this.collection.get(id);
- $('.form-horizontal').empty();
- this.collection.remove(item);
- new AddView();
- },
- render:function (eventName) {
- var template = this.template,
- el = this.$el;
-
- $("table tr").remove();
- this.collection.each(function(product){
- j=product.toJSON();
- j['id']=product.cid;
- console.log(template);
- el.append(template(j));
- });
- return this;
- }
- });
- //Define AddView - to add new products to the collection
- AddView = Backbone.View.extend({
- className:"span4",
- tagName: "div",
- events: {
- "click #addBtn": "add",
- "keypress .addName": "onEnter"
- },
- initialize: function() {
- this.template = _.template($('#item-edit').html());
- this.render();
- },
- render: function() {
- $(this.el).html(this.template());
- $('.row').append(this.el);
- return this;
- },
- onEnter: function(e) {
- if (e.keyCode == 13) {
- console.log("on Enter")
- this.add(e);
- }
- },
- add: function(e) {
- e.preventDefault();
- var newProduct = new Product({name:$('#name').val(),type:$('#type').val() });
- products.add(newProduct);
- console.log(products);
- $('#name').val('');
-
- return this;
- }
- });
- //Define Router. List to two routes, home and add view
- AppRouter = Backbone.Router.extend({
- routes:{
- "":"home",
- "add":"add",
- },
- home:function() {
- console.log('home');
- new HomeView();
- },
- add:function() {
- console.log('add');
- new AddView();
- },
- });
- }(jQuery));
- $(document).ready(function () {
- //initiate the router
- productApp = new AppRouter();
- //keeps the browser history in memory
- Backbone.history.start();
- //initiate new products when DOM runs
- var p = new Products([
- {type: "Music", name: "Unit"},
- {type: "Video", name: "EDG"},
- {type: "Music", name: "Plateia"}
- ]);
- products.add(p.toJSON());
- });
- </script>
- <!-- Define template for the home view -->
- <script type="text/template" id="item-home">
- <div class="container">
- <div class="rows">
- <div class="col-md-6">
- <div class="base_border">
- <div class="base">
- <div class="products_search">My Recently added Products:</div>
- <table class="products_table table">
- </table>
-
- </div>
- </div>
- </div>
- </div>
- <div class="col-md-6">
- <div class="row">
- <div class="span4">
- <div class="content upload_new" style="margin-bottom: 20px"><a href="#add">upload new products > </a></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </script>
- <!-- Define template for the add view (to add in new products) -->
- <script type="text/template" id="item-edit">
- <form class="form-horizontal" method="post" role="form" style="margin-left:20px">
- <legend>Enter the product detail:</legend>
- <div class="form-group">
- <label class="control-label col-md-3" for="name">Name:</label>
- <div class="col-md-6">
- <input type="text" class="addName form-control" id="name" name="name" placeholder="Enter the product name">
- </div>
- </div>
- <div class="form-group ">
- <select id="type" class="col-md-offset-4 addName">
- <option>Music</option>
- <option>Video</option>
- <option>E-book</option>
- <option>Other</option>
- </select>
- </div>
- <div class="form-group">
-
- <div class="controls">
- <button type="submit" class="col-md-3 col-md-offset-2"><a href="#" id="cancelBtn" class="btn">cancel</a></button>
- <button type="submit" class="col-md-3 addName"><a href="#" id="addBtn" class="btn addName">add</a></button>
- </div>
- </div>
- </form>
- </script>
- <!-- Define template for the list view (product list) -->
- <script type="text/template" id="item-list">
- <tr class="product">
- <td>
- <img class="product_img" src="/static/img/i_p2_tile.jpg">
-
- <span><%= name %></span>
- </td>
- <td>
- <img src="/static/img/i_video.png">
- <span><%= type %></span>
- </td>
- <td>
- <a href="#" data-id="<%= id %>" class="edit" data-toggle="tooltip" title="edit">
- <img src="/static/img/i_edit.png" alt="edit" style="padding-right:10px"></a>
- <a href="#" data-id="<%= id %>" class="remove" data-toggle="tooltip" title="delete"><img src="/static/img/i_delete.png" alt="Delete" style="padding-right:10px"></a></td>
- </tr>
- <tr class="spacer"><td></td></tr>
-
- </script>
- {% endblock %}