Question

我是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）时，我什么也得不到。我想我可能错过了一些非常小的东西。不确定是什么，也许事情的流动都是错的。

Answer 1

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

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

以下是他应该如何做的例子...... 让我们想象一下Twitter应用程序。 Twitter应用程序只有一个代表系统中一个用户的模型。这是UserModel

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

Answer 2

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

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

所以当你的代码中有

时

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

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

backbone.js将数据导入集合和模板

2 个答案: