使用 backbone 和车把将表单值添加到 table

Question

场景是在单击“添加”按钮时将表单字段中输入的值添加到 table 中。我对这两者都是新手，不确定数据绑定是如何工作的。

我的初始 html 是

<table class="table table-bordered">
    <thead>
    <tr>
        <th>Model</th>
        <th>Brand</th>
        <th>Year</th>
        <th>Action</th>
    </tr>
    <tr>
        <td><input class="form-control" id="modelname"></td>
        <td><input class="form-control" id="brandname"></td>
        <td><input class="form-control" id="yearname"></td>
        <td><button class="btn btn-primary add">Add</button></td>
    </tr>

    </thead>
    <tbody class="product-list">

    </tbody>
  </table>
  </div>

   <script type="text/x-handlebars-template" id="product-template">
     {{#each []}}
      <tr>
          <td>{{ model }}</td>
          <td>{{ brand }}</td>
          <td>{{ year }}</td>
            <td><div class="btn btn-primary">Edit</div>&nbsp;<div class="btn btn-danger">Delete</div></td>
      </tr>
      {{/each}}

   </script>

为了将车把用作

，我搞砸了 js

var Product=Backbone.Model.extend({
     model:'',
     brand:'',
     year:''
});

var ProductCollection=Backbone.Collection.extend({
    model:Product
});

   var modelname= document.getElementById('modelname').value;
   var brandname=document.getElementById('brandname').value;
    var yearname= document.getElementById('yearname').value;
var ProductView = Backbone.View.extend({

        el: '.product-list',
        tagName: 'tr',
        events:{
        "click .add": "create"
         },
        initialize:function(){
            this.render();
        },
        render:function()
        {
            var source=$('#product-template').html();
            var template=Handlebars.compile(source);
            var html=template(this.products.toJSON());
        },
       create: function(e){
        var product=new Product({
          model:modelname,
           brand:brandname,
          year:yearname
      })
          console.log(product.toJSON);
           products.add(product);
        modelname="";
        yearname="";
        brandname="";
         }

      });
  var products=new ProductCollection();

与我分享如何进行的想法。我没有收到错误，同时什么也没有发生！我对 backbone 很陌生。请容忍错误。

Answer 1

我举例说明了如何使用 underscore 模板 和 handlebars 实现这一点。使用它迭代模型集合以显示产品列表。

Underscore.js

<tbody class="product-list">
    <script type="text/template" id="product-template">
        <% _.each(products.models, function(product){ %>
        <tr>
            <td><%= product.get('modelName') %></td>
            <td><%= product.get('brand') %></td>
            <td><%= product.get('year') %></td>
        </tr>
        <% }) %>
    </script>
</tbody>

在脚本文件中定义模型：

var Product = Backbone.Model.extend({});

接下来，定义一个集合并将这些模型添加到集合中：

var ProductList = Backbone.Collection.extend({
    model: Product
});

大多数时候我们在 Backbone 应用程序中使用视图来进行渲染：

var ProductView = Backbone.View.extend({
    el: '.product-list',
    template: _.template($('#product-template').html()),
    render: function(products){
        this.$el.html(this.template({
            products: products
        }));    
    }
});

您可以从完整应用程序的工作代码中看到，我们从 productView 调用 render 方法并将其作为参数传递给集合：this.productView.render(this.collection) 现在我们可以将它用作模板中的列表来迭代并显示 modelName、brand 和 year for列表中的每个产品。

工作代码：jsFiddle

I am particularly asked to use handlebars

Handlebars.js

您的代码中有很多错误：

定义 视图实例 var products = new ProductView();，而不是定义 ProductCollection();
var html=template(this.products.toJSON()); Cannot read property 'toJSON' of undefined ，在工作示例中检查 initialize 方法，您需要定义集合并听他的，因为每次我们向集合添加内容时我们都想渲染 ProductView
el: '.table' 不是 el: '.product-list',
var modelname= document.getElementById('modelname').value; var brandname ... - 你将它们作为全局变量，而不是将变量放在 create() 方法
将var html=template(this.products.toJSON());替换为$('.product-list').html(template(this.products.toJSON()))

如果有什么不清楚，首先阅读文档：backbone.js and check working example: jsFiddle

使用 backbone 和车把将表单值添加到 table

Adding form values to a table with backbone and handlebars

backbone.js

handlebars.js

Underscore.js

Handlebars.js