Question

我对backbone.js很新。我有以下设置

Scripts
|--App
|   |--collecions
|   |    |----students.js
|   |--model
|   |    |---student.js
|   |--views
|   |    |---Header-View.js
|   |    |---Stud-List-View.js
|   |    |---Stud-Item-List-View.js
|   |    |---StudView.js
|   |--app.js
|--Templates
|   |-----Header.htm
|   |-----StudTable.htm
|   |-----student.htm
|--main.js

StudTable.html就是这样-----

<table class="table table-condensed table-bordered">
<caption>Student Details </caption>
<thead>
    <tr>
        <th>
            First Name
        </th>
        <th>
            Last Name
        </th>
        <th>
            Age
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            {{firstname}}
        </td>
        <td>
            {{lastname}}
        </td>
        <td>
            {{age}}
        </td>
    </tr>
</tbody>

如何从此处渲染集合

function ($, _, Backbone, Student, StudList, HeaderView, StudView, ListView, CloneView) {
 var AppView = Backbone.Router.extend({
     routes: {
         "": "list",
         "students/clone": "clone",            
     },

     initialize: function () {
         var view = new HeaderView();
         return this;
     },
     clone: function () {
         var studs = new StudList();
         studs.fetch({
             success: function () {
                 $("#content").html(new CloneView({ collection: studs }).el);
             }
         });
     },

 });    

 return AppView;
});

如何在jQuery克隆的帮助下显示表中的集合而不触及html模板的格式？有没有什么方法可以克隆到集合中每个元素的表中？

我不想使用类似这个问题的两个观点

Render Html Table with underscore template engine

他们使用了两个视图：一个用于tbody，另一个用于将tr附加到tbody。我希望在上面提到的模板的帮助下在单个视图中执行此操作。有可能吗？

Answer 1

根据评论，您应该使用2个视图和2个模板。我认为原帖中的“克隆”机制没有任何优势 - 这不是Backbone方式！

主App视图将呈现主页面HTML，每个单独的<tr>视图将代表数据库/ datamodel中的记录。因此，渲染主App视图，然后遍历JSON响应以单独呈现每个<tr>视图。

从那里，您可以轻松添加，删除和排序行。因为每个视图都会直接绑定到一个模型实例，所以这两个视图可以很容易地“相互交谈”（yay Backone！）。

这个网站帮助我学习了第一次开始时组织我的Backbone应用程序的最佳方法： http://ricostacruz.com/backbone-patterns/#sub_views

将表tr克隆到骨干模板中

1 个答案: