提问者:小点点

如何从主干木偶中的项目视图实例访问复合视图


基本情况是这样的:

我有一个复合视图和项目视图。我构造了复合视图,传递了一个模型和一个集合。模型数据用于填充复合视图的模板。收集数据用于填充复合视图的项目视图。

我想做的是:在项目视图的模板帮助器中,我想访问复合视图的模型数据。我已经访问了Item视图的view实例。我想这可能会给我一个复合视图的句柄,从那里我可以得到它的模型,但它没有。

有没有一种方法可以做到这一点-从复合视图实例的一个项视图实例访问它?

谢啦

--贾斯汀·维利


共3个答案

匿名用户

如果你想从父CompositeView访问数据,你可以做很多不同的事情。

>

CompositeView直接在所有子视图上调用一个方法,并将所需内容传递给该方法。

触发项目视图上的事件或由项目视图侦听的事件。

这些选项都不是直接从子级访问父级视图,而是应该执行您想要的操作。下面是如何使用这些方法将CompositeView的模型传递给子视图的代码。

// Pass model into ItemView on init
var MyItemView = Backbone.Marionette.ItemView.extend({
  initialize : function (options) {
    this.parentsModel = options.parentsModel;
  }
});
var MyCompView = Backbone.Marionette.CompositeView.extend({
  itemViewOptions : function () { return { parentsModel: this.model }; }
  itemView : MyItemView
});


// Invoke function on ItemView, passing data in
var MyItemView = Backbone.Marionette.ItemView.extend({
  doSomethingWithParent : function (parentModel) {
    // do cool thing with parentModel
  }
});
var MyCompView = Backbone.Marionette.CompositeView.extend({
  itemView : MyItemView,
  onRender : function () {
    this.children.call("doSomethingWithParent", this.model);
  }
});


// Trigger event that ItemView knows about
var MyItemView = Backbone.Marionette.ItemView.extend({
  initialize : function () {
    this.listenTo(this, "special:event", function (parentModel) {
      // Do cool things
    });
  }
});
var MyCompView = Backbone.Marionette.CompositeView.extend({
  itemView : MyItemView,
  onRender : function () {
    this.children.each(_.bind(function (childView) {
      childView.trigger("special:event", this.model);
     }, this));
  }
});

匿名用户

我没有回答这个问题。但改变方法是可行的。我没有尝试从项目视图访问“父”复合视图,而是从复合视图访问项目视图:

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#onbeforeitemadded-回拨

我可以修改当前项视图的模型(基于复合视图模型中的值)。

匿名用户

我想分享安德鲁·哈布斯的建议是如何帮助我的。我试图显示与我的项目模板内联的父模型属性。我使用Marionette的templateHelper属性结合Andrew的建议来完成此操作。

我尽量让这个例子简短:

复合模板示例-myView模板:

<h1>Page {{name}}</h1>
<h6>Children</h6>
<ul></ul>

项目模板示例-myItemTemplate:

{{name}} is child of: {{getParentName}}

意见:

App.module( 'App.View', function( View ){

    View.MyItemView = Marionette.ItemView.extend({

        initialize: function( options ) {
            this.parentModel = options.parentModel;
        },

        template: myItemTemplate,

        tagName: 'li',

        templateHelpers: function() {

            var view = this;

            return {
                // Called by item template, returns parent model 'name' property.
                getParentName: function() {
                    return view.parentModel.get('name');
                }

            };
        }

    });

    View.MyView = Marionette.CompositeView.extend({

        template: myViewTemplate,

        itemView: View.MyItemView,

        itemViewContainer: 'ul',

        itemViewOptions: function() {

            return { parentModel: this.model };

        }

    });

});

这将如何实施的一个例子:

// example of how implementation
// parent model has an attribute called 'children', which is a collection of models
var children = parent.get('children');

var view = new App.View.MyView( { model: parent, collection: children } );

App.mainRegion.show( view );