Question

方案是在单击“添加”按钮时将表单字段中输入的值添加到表中。我是新手，并且不确定数据绑定是如何工作的。

我的初始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();

分享我的想法如何继续。我没有收到错误，但同时没有任何反应！我对骨干很新。请容忍失误。

Answer 1

我制作并举例说明如何使用下划线模板和把手来实现这一目标。使用它来迭代模型集合以显示产品列表。

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应用程序中使用view来进行渲染：

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

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

工作代码：jsFiddle

我特别被要求使用把手

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并查看工作示例：jsFiddle

将表单值添加到具有主干和句柄的表中

1 个答案:

Underscore.js

Handlebars.js