下划线模板循环，没有环？(Underscore Template Looping, Without

这从另一个问题，我问排序如下的，但我认为这个家伙试图解释别的东西，或者更可能我没有解释我自己的权利。

所以我所有的骨干代码工作，并显示出输出正确的数据。现在为这个跟我的测试数据说明，我有17行的投入，但即使没有作出_.each循环，其循环约17倍，这只是我不明白，为什么？

所以，我的骨干代码，

var TimeSheetModel = Backbone.Model.extend({
     defaults: {
        Timesheetrow: "",

     }
}); //End of Timesheet Model

var TimeSheetCollection = Backbone.Collection.extend({
    model: TimeSheetModel,
    url: '/dashboard/jsondata/' + TimesheetID()
}); //End of Timesheet Collection

var TimeSheetView = Backbone.View.extend({
    el:'#testarea', //HTML loading area for the data

    template: _.template( $('#TimesheetData').html() ), //Template to load the JSON data into

    initialize: function(){
      var NewTimeSheetCollection = new TimeSheetCollection(); //New Instance Of Collecttion
      this.listenTo(NewTimeSheetCollection, "add", this.AddMyModel);
      NewTimeSheetCollection.fetch();
    },

    AddMyModel: function(TimeSheetModel) {  //apply model data to view template and append to view element   
       this.$el.append(this.template(TimeSheetModel.toJSON()));
       //$(this.el).html(this.template(TimeSheetRowModel.toJSON()));
    }
}); //End of Timesheet View

//New Instance & render call for the set Timesheet View.
NewTimeSheetVew = new TimeSheetView();
//NewTimeSheetVew.render(); <- do I need this? seems to work, without it?

});

而我的下划线模板代码

<script type="text/template" id="TimesheetData">

<% console.log(Timesheetrow) %>

<% _(1).times(function(n){ n=2;  }); //just a test bit of code %>


 <% if(Timesheetrow.jobtitle) { %>

   <form action="#" method="post" id="TimesheetDataList">

        <div class="TimesheetRowData">
            <input type="hidden" name="data[Timesheetrow][0][id]" value="<%= Timesheetrow.id  %>">
            <input type="type" name="data[Timesheetrow][0][jobtitle]" value="<%= Timesheetrow.jobtitle  %>">
        </div>

    </form>

 <%  }; %>

</script>

所以我的目标是用骨干，有一个主表，以及约17次循环（或X，根据用户给定的行）。因此，举例来说，我会等相关的输出：

<form id="ID-HERE">
      <div><input value="XXXXX"></div>
      <div><input value="XXXXX"></div>
      <div><input value="XXXXX"></div>
      <div><input value="XXXXX"></div>
      <div><input value="XXXXX"></div>
</form>

但是，我得到的是，为循环17次，所以每个输入作为自己的表单标签，所以我现在有我的第17个表格。

任何帮助深受欢迎。

请让我知道，如果我没有解释自己的权利，我诵读困难的，所以我的拼写，语法，可能有点过了，不好意思。

谢谢，

您正在收听的集合中添加事件，这将为从服务器中检索每个模型提取操作之后被解雇：

this.listenTo(NewTimeSheetCollection, "add", this.AddMyModel);
NewTimeSheetCollection.fetch();

所以，你的服务器返回17行，添加事件被触发17次，每一次你AddMyModel功能被渲染的模板。（如果你看看文档，抓取内部使用的set方法，该方法将触发添加的事件）。

你的问题是，你正在使用，以使每个模型模板包含表单标签，它不应该被重复每一个模型。

你有解决这个，基本上分裂什么需要进行一次渲染的，哪些有被渲染为每个模型的几个方法：

更新您的模板来渲染模型的阵列，在模板中手动循环。不要听集合中添加的事件，而是通过一个成功的回调到fetch方法，在那里你呈现你的模板传递给它的车型阵列。
斯普利特在2模板：主一个与表单环和一个儿童一台带有单个输入TimesheetRow 。在渲染视图初始化主模板，并继续听集合添加事件。在AddMyModel ，渲染子模板并追加其在表单内。
拆分视图到主视图和子视图。主视图将呈现形式和获取集合，听添加事件。对于每一个加入的模式，它会创建传递给它添加的模型，使其与追加其子视图的新实例el表单内。

编辑

我创建了一个的jsfiddle与第三个选项。有2次TimeSheetRowView和TimeSheetCollectionView ：

var TimeSheetRowView = Backbone.View.extend({
    className:'TimesheetRowData', 
    template: _.template($('#TimesheetData').html()), 
    render: function() {
        this.$el.append(this.template(this.model.toJSON()));
        return this.$el;
    }
});

var TimeSheetCollectionView = Backbone.View.extend({
    el:'#MasterContainer', 
    template: _.template($('#TimesheetForm').html()),
    initialize: function(){
        //render master template
        this.$el.append(this.template());
        //keep element so we insert child views before it, inside the form
        this.submitButton = this.$(".actionSubmit"); 
        //initialize collection and listen to events
        this.collection = new TimeSheetCollection();
        this.listenTo(this.collection, "add", this.AddTimesheetRow);

        //simulate a fetch just setting the models
        var hardcodedModels = [{Timesheetrow: {id: 1, index: 0, jobtitle: 'Foo'}},
                              {Timesheetrow: {id: 2, index: 1, jobtitle: 'Bar'}}];
        this.collection.set(hardcodedModels);
    },
    AddTimesheetRow: function(model) {
        //render a single row view and insert it inside the form, right before the submit button
        var view = new TimeSheetRowView({model: model});
        //view.render() returns its $el so we can chain the insertBefore method
        view.render().insertBefore(this.submitButton); 
    }
});

和模板已经被分为：

<script type="text/template" id="TimesheetForm">
   <form action="#" method="post" id="TimesheetDataList">   
       <input type="submit" class="actionSubmit" value="Send"/>
   </form>
</script>

<script type="text/template" id="TimesheetData">     
    <input type="hidden" name="data[Timesheetrow][<%= Timesheetrow.index %>][id]" value="<%= Timesheetrow.id  %>">
    <input type="type" name="data[Timesheetrow][<%= Timesheetrow.index %>][jobtitle]" value="<%= Timesheetrow.jobtitle  %>">        
</script>