主干.js 将数据输入集合和模板答案

【问题标题】：backbone.js getting data into collection and template主干.js 将数据输入集合和模板
【发布时间】：2013-01-04 14:39:30
【问题描述】：

我是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) 时，我什么也没得到。我想我可能错过了一些非常小的东西。不知道是什么，也许事情的流程都是错误的。

【问题讨论】：

标签： backbone.js

【解决方案1】：

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

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

这是他的例子应该如何做...... 让我们以 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 上拥有许多用户列表。所以你有两个列表。在一个列表中，您有朋友用户，而在其他家庭用户

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);
    }
});

【讨论】：

这里还有一个问题。在“this.collection.fetch()”之后，我可以使用 console.log(this.collection)，使用 firebug 导航并查看“模型”中存在的数据。但是当我尝试 console.log(this.collection.models) 它返回一个空对象。 this.collection.toJSON() 也得到一个空结果。

【解决方案2】：

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

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

所以当你的代码中有

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

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

【讨论】：