1

我已经阅读了很多教程并在.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;

});

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

似乎有2个问题：

1) fetch() 是异步的，所以代码在 ajax 往返结束之前执行。

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

编辑 ：

为了使用胡子标签，我首先编写了这段代码：

在此处输入图像描述

4

1 回答 1

2

首先，正如您所说，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。

编辑：

你还有几个问题：

  • 您正在使用带有小胡子标签 ( {{ }}-> <%= %>)的下划线模板
  • self = this渲染中缺少 var
  • 你不叫appview.render()！:)

这是您在 jsfiddle 上工作的代码：http: //jsfiddle.net/PkuqS/

于 2012-11-04T17:43:59.927 回答