Question

我已经阅读了很多教程并在.net上进行了搜索...但是我仍然遇到Backbone.js的问题。这是我的简单场景：

Rails应用程序使用JSON对象集合响应GET请求。我想在DOM准备好时动态构建带有Backbone集合的表行列表。这是令我困惑的代码：

HTML部分：

  <script type="text/template" id="tmplt-Page">
      <td>{{=title}}</td>
      <td>{{=description}}</td>
  </script>

Backbone的脚本：

$(function(){
    var Page = Backbone.Model.extend({});

    var Pages = Backbone.Collection.extend({
        model: Page,
        url: '/pages'
    });
    var pages = new Pages([
        {title: 'ProvA1', description: ''},
        {title: 'ProvA2', description: ''}
    ]);

    var PageView = Backbone.View.extend({
        tagName: 'tr',
        template: _.template($('#tmplt-Page').html()),

        render: function() {
            this.$el.append(this.template(this.model.toJSON()));
            return this;
        }

    });

    var AppView = Backbone.View.extend({
        el: $("#results"),

        initialize: function () {
            _.bindAll(this, 'render');
            pages.on('reset', this.render)
        },

        render: function() {
            this.$el.empty();
            pages.each( function( page ) {

                var view = new PageView({
                  model : page
                });

                this.$el.append(view.render().el);

            });

            return this;
        }

    });

    var appview = new AppView;

});

屏幕上没有任何内容呈现。

似乎有两个问题：

1）fetch（）是异步的，因此代码在ajax往返结束之前执行。

2）如果我手动将一些对象加载到集合中，这段代码“this.template（this.model.toJSON（））”不能替代jSON属性

编辑：

要使用小胡子标签，我先写完这段代码：

enter image description here

Answer 1

首先，正如您所说，fetch()是异步的，但它会在完成时触发'重置'事件，因此您应该在AppView.initialize中添加它：

pages.on('reset', this.render)

其次，您永远不会在任何地方插入PageView的HTML。在AppView.render中添加：

// at the beginning var self = this; // and in the forEach loop self.$el.append(view.el);

第三，在AppView.render开始时，您应该清除this.$el的内容。

编辑：

你还有几个问题：

您正在使用带有胡须标记的下划线模板（{{ }} - ＆gt; <%= %>）
渲染中缺少var self = this
你没有打电话给appview.render()！：）

以下是您在jsfiddle上运行的代码：http://jsfiddle.net/PkuqS/

Backbone.js理解：使用模板获取和显示

1 个答案: