Backbone传递集合中的特定模型来查看?

时间:2014-04-03 00:31:29

标签: backbone.js collections models

var theseMessages = window.App.data.messages.where({ chat_id: 2 })
this.messagesView = new MessagesView({ collection: theseMessages });

我不确定将具有特定属性的集合传递给视图构造函数的正确方法。

示例我的收藏可能看起来像

[
  {
    "chat_id": "1",
    "facebook_name": "Tim Parker",
    "facebook_email": "tim@aol.com",
    "facebook_id": "1663565265",
    "gravatar": null,
    "message": "Whats up",
    "_id": "533b6a4c7cc6647012f441ad",
    "__v": 0,
    "sent": "2014-04-02T01:39:24.747Z"
  },
  {
    "chat_id": "2",
    "facebook_name": "nick matthews",
    "facebook_email": "john@aol.com",
    "facebook_id": "1663565265",
    "gravatar": null,
    "message": "Hey admin",
    "_id": "434636",
    "__v": 0,
    "sent": "2014-04-02T01:48:45.585Z"
  }
]

所以当我想在我的应用程序中渲染这个集合并且只传递具有chat_id : 2的模型时,我会认为这样的东西就足够了吗?

var theseMessages = window.App.data.messages.where({ chat_id: 2 })
this.messagesView = new MessagesView({ collection: theseMessages });

但它给我一个错误的任何想法?

编辑:应该从一开始就更具体,我正在使用牵线木偶集合视图。所以我需要传递一个集合,但必须有一种方法将集合限制为具有特定属性的项目,也许我需要改变我的逻辑?

var Marionette = require('backbone.marionette');

var MessageView = Marionette.ItemView.extend({

    className: 'message row',
    template: require('../../templates/message.hbs')

});

module.exports = CollectionView = Marionette.CollectionView.extend({

    className: 'collection',
    initialize: function() {
        this.listenTo(this.collection, 'change', this.render);
    },
    itemView: MessageView

});

2 个答案:

答案 0 :(得分:1)

我认为你打算这样做:

this.messagesView = new MessagesView({ model: theseMessages });

答案 1 :(得分:1)

在您过滤收藏品的行中:

var theseMessages = window.App.data.messages.where({ chat_id: 2 })

变量theseMessages只保存Collection中的一个项目数组,而不是另一个Collection本身 - 这可能就是你在MessagesView中收到错误的原因。

我会在渲染时动态地在Collection或者MessagesView中进行过滤,而不是尝试将已经过滤的Collection传递给MessagesView的构造函数。大多数时候,我可能会在MessageView中执行此操作,因为我倾向于将过滤视为特定于视图的事物。但是如果Collection不会同时在另一个视图中使用,那么在Collection中过滤会很好。

无论哪种方式,这里都是一些示例代码。要过滤MessageView

// within MessageView 
serializeData: function() {
    var data = Marionette.CollectionView.prototype.serializeData.call(this);
    return _.where(data, { chat_id: 2 });
}

或者在Collection中过滤:

// within your Collection
toJSON: function() {
    return this.chain()
       .where({ chat_id: 2 })
       .map(function(model){ return model.toJSON(); }
       .value();
}

我还没有测试过那段代码,但是这样的代码应该可以运行。

顺便说一下,为了澄清此处其他评论中提到的collection: vs model:主题:您在视图的构造函数中使用collection:选项是正确的。骨干&木偶想要一个集合collection:,一个模型需要model: