Question

基本情况如下：

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

我想要做的是：在Item视图的模板助手中，我想访问Composite View的模型数据。我已经访问了项目视图的视图实例。我认为这可能会让我对复合视图有所了解，从中可以看到它的模型，但事实并非如此。

有没有办法可以做到这一点 - 从一个项目视图实例中访问复合视图实例？

由于

- Justin Wyllie

Answer 1

如果您想访问来自父CompositeView的数据，您可以执行许多不同的操作。

通过ItemView上的itemViewOptions辅助函数将数据直接传递给CompositeView。注意：此选项已更改为Marionette 2中的childViewOptions。
直接在CompositeView的所有子视图上调用方法，并将您想要的任何内容传递给该方法。
触发ItemView或由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)); } });的模型传递给子视图的代码。

{{1}}

Answer 2

我没有回答这个问题。但改变方法是有效的。而不是试图访问父母＆＃39;项目视图中的复合视图我从复合视图访问项目视图：

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

我可以修改当前项目视图的模型（基于Composite View模型中的值）。

Answer 3

以为我会分享Andrew Hubbs建议如何帮助我。我试图用我的项目模板内嵌显示父模型属性。我使用Marionette的templateHelpers属性与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 );

如何从Backbone Marionette中的项目视图实例访问复合视图

3 个答案: