下划线模板循环，如果没有一个循环？ [英] Underscore Template Looping, Without A Loop?

问题描述

这样的另一个问题，我问是继但是我觉得这个家伙试图解释别的东西，或更可能我没有解释我自己的权利。

This sort of follows on from another question I asked but the guy I think was trying to explain something else, or more likely I did not explain my self right.

所以我所有的骨干code工作，并显示出输出正确的数据。现在，这与我的测试数据解释，我有17行的投入，但即使没有作出 _.each 循环，其循环约17倍，而我只是不'不懂为什么？

So all my backbone code is working, and displaying out the output right data. Now for this explain with my test data, I have 17 rows of inputs, but even without making a _.each loop, its looping around 17 times, which I just don't understand why?

所以，我的骨干code，

So my Backbone code,

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?

});

和我下划线的模板code

And my Underscore template code

<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，根据用户给定的行）。因此，举例来说，我想有这样一个输出：

so my goal is to use backbone, to have one master form, and to loop around 17 times (or X, depending on user given rows). So, for example, I would have an output like:

<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页表格。

But what I am getting is that is loops 17 times, so each input as its own form tag, so I currently have 17 forms on my page.

任何帮助非常受欢迎的。

Any help most welcome.

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

Please, let me know if I have not explained myself right, I am dyslexic, so my spelling, grammar, may be a little off, sorry.

谢谢，

推荐答案

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

You are listening to the add event in the collection, which will be fired after a fetch operation for each model retrieved from the server:

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

所以你的服务器返回17行，添加事件被触发17次，每一次你的 AddMyModel 函数被渲染的模板。 （如果你看一下文档，内部获取用途的 设置 方法，该方法将触发添加事件）。

So your server is returning 17 rows, the add event is fired 17 times, and every time your AddMyModel function is rendering the template. (If you have a look at the documentation, the fetch uses internally the set method which will fire the add events).

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

Your problem is that the template you are using to render each model contains the form tag, which shouldn't be repeated for every model.

您必须解决这个，基本上什么分裂，必须一次渲染，哪些必须被渲染为每个模型的几个方法：

You have a few ways of fixing this, basically splitting what has to be rendered once and what has to be rendered for each model:

• 更新您的模板来呈现的车型阵列，在模板中手动循环。不要听集合中的添加事件，而是传递一个成功回调至fetch方法，在那里你呈现你的模板传递给它的车型阵列。

• Update your template to render an array of models, manually looping inside the template. Do not listen to the add events in the collection and instead pass a success callback to the fetch method, where you render your template passing to it the array of models.

分裂您的模板2：一个主一个具有形式循环和一个孩子一个具有输入，用于单个 TimesheetRow 。在渲染视图初始化主模板，继续听集合添加事件。在 AddMyModel ，渲染子模板，并追加其在表单内。

Split your template in 2: a master one with the form loop and a child one with the inputs for a single TimesheetRow. Render the master template on view initialize, and keep listening to collection add events. On AddMyModel, render the child template and append it inside the form.

拆分视图到主视图和子视图。主视图将呈现的形式和获取集合，听添加事件。对于每一个加入的模式，它会创建传递给它添加的模型，渲染它，并追加子视图的新实例，其报的形式中。

Split your view into a master view and a child view. The master view will render the form and fetch the collection, listening to add events. For every added model, it will create a new instance of the child view passing to it the added model, rendering it and appending its el inside the form.

修改

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

I have created a jsfiddle with the third option. There are 2 views TimeSheetRowView and 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>

这篇关于下划线模板循环，如果没有一个循环？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！