2

我是backbone.js 的新手，需要一些帮助将数据发送到模板。我使用带有 fetch 的模型和一个集合。这是代码：

(function($) {

var UserModel = Backbone.Model.extend({
    urlRoot : '/users',
    defaults : {
        name : '',
        email : ''
    },

    initialize : function() {
        _.bindAll(this);
        this.fetch();
    },
    parse : function(res) {
        return JSON.stringify(res);
    },

});

var users_coll = Backbone.Collection.extend({
    //model: UserModel
    initialize : function() {
        var u = new UserModel();
        this.model = u;
    }
});

var displayView = Backbone.View.extend({

    initialize : function() {

        this.collection = new users_coll();
        //_.each(this.collection.models, alert);
        //console.log(this.collection);
        //alert(JSON.stringify(this.collection.models));

        this.render();
    },
    render : function() {
        var tmpl = _.template($("#data-display-tpl").html());
        this.$el.html(tmpl);

    }
});

var view = new displayView({
    el : $("#data-display")
});

     })(jQuery);

它在模型部分工作得很好。在模型的解析函数中，我使用了 console.log() ，一切看起来都很好。我得到了一个格式正确的 json，并且 fetch 也可以正常工作。

但是在我的收藏中，当我尝试 console.log(user_coll.models) 时，我什么也没得到。我想我可能错过了一些非常小的东西。不知道是什么，也许事情的流程都是错误的。

4

2 回答 2

2

我试图稍微修改你的代码以获得点槽......希望它有助于澄清一些基础知识。

我也没有尝试提供的示例，但理论上它应该可以工作；）

以下是他的示例应该如何完成...让我们以 Twitter 应用程序为例。Twitter 应用程序只有一个模型代表系统中的一个用户。那是用户模型

var UserModel = Backbone.Model.extend({
    urlRoot : '/user',   // this is just for modifying one specific user
    defaults : {
        name : '',
        email : ''
    },
    initialize : function() {
        _.bindAll(this);
        //this.fetch();    // WRONG: This call was "wrong" here
                           //        fetch() should be done on Collection not model 
    },
    parse : function(res) {
        return JSON.stringify(res);
    },
});

现在，您可以在 Twitter 上拥有许多用户列表。所以你有两个列表。在一个列表中，您有 Friends用户，而在其他 Family用户中

var UsersFriendsCollection = Backbone.Collection.extend({
    model: UserModel              // you tell Collection what type ob models it contains
    url: '/users/friends',
    initialize : function() {
        // jabadaba whatever you need here
    }
});

var UsersFamilyCollection = Backbone.Collection.extend({
    model: UserModel              // you tell Collection what type ob models it contains
    url: '/users/family',
    initialize : function() {
        // jabadaba whatever you need here
    }
});

...

var displayView = Backbone.View.extend({
    initialize : function() {
        this.collection = new UsersFriendsCollection();
        this.collection.fetch();       // so you call fetch() on Collection, not Model

        console.log(this.collection);  // this should be populated now

        //_.each(this.collection.models, alert);
        //alert(JSON.stringify(this.collection.models));

        this.render();
    },
    render : function() {
        // collection data is avail. in templating engine for iteration now
        var tmpl = _.template($( "#data-display-tpl" ).html(), this.collection);
        this.$el.html(tmpl);
    }
});
于 2013-01-04T15:57:14.943 回答
1

集合的模型属性用于指定集合将包含什么类型的模型，如果指定，您可以向集合传递一个原始对象数组，它将添加和创建它们。从文档

覆盖此属性以指定集合包含的模型类。如果已定义，您可以传递原始属性对象（和数组）来添加、创建和重置，属性将被转换为适当类型的模型

所以当你的代码中有

  var u = new UserModel();
  this.model = u;

您实际上并没有将模型添加到集合中。相反，您可以使用集合add或fetch方法。

于 2013-01-04T15:09:06.473 回答