javascript - 带模型的 Marionette CompositeView

Question

我希望我的合成自动呈现一个集合，它已经这样做了。不过，我也希望它能为我获取一个模型，并为该模型提供复合访问权限。

基本上，我正在尝试使用下面的一组客户呈现用户详细信息。

复合 View

define([
  "marionette",
  "text!app/templates/user/view-clients/collection.html",
  "app/collections/users/clients",
  "app/views/user/view-clients/item",
  'app/models/user'
],
  function(Marionette, Template, Collection, Row, Model) {
    "use strict"
    return Backbone.Marionette.CompositeView.extend({
      template: Template,
      itemView: Row,
      itemViewContainer: "#stage-user-clients",
      collectionEvents: {
        'sync': 'hideLoading'
      },
      initialize: function (options) {
        this.showLoading()

        this.model = new Model({_id: options.id})
        this.model.fetch() 

        this.collection = new Collection()
        this.collection.queryParams = {_id: options.id}

        return this.collection.fetch()
      },
      showLoading: function() {
        this.$el.addClass('loading')
      },
      hideLoading: function() {
        this.$el.removeClass('loading')
      }
    })
  })

项目 View

define(["marionette", "text!app/templates/user/view-clients/item.html"], function(Marionette, Template) {
  "use strict"
  return Backbone.Marionette.ItemView.extend({
    template: Template,
    tagName: "li"
  })
})

我是否需要自己管理渲染方法或为模型创建一个单独的 View 并手动将其绑定(bind)到复合模板内的 id？

Answer 1

您最好不要从 View 内部实例化您的集合/模型。

var MyCompositeView = Backbone.Marionette.CompositeView.extend({
    initialize: function() {
        // The collection is already bound, so we take care only of the model
        // Both will be rendered on model change, though
        this.listenTo(this.model, 'change', this.render, this);

        // If you want to rerender the model only, use this instead :
        this.listenTo(this.model, 'change', function(){
            this.$el.html(this.renderModel());
        }, this);
    }
    ...
});

var myCollection = new Collection({url: '/collection/'});
var myModel = new Model({url: '/model/', id: 1});

var myCompView = new MyCompositeView({model: myModel, collection: myCollection});

myModel.fetch();
myCollection.fetch({reset: true});

这大概就是它的样子。如有疑问，请查看 backbone 的来源。