木偶：将数据从 CollectionView 传递到 ItemView 到 ItemView答案

【问题标题】：Marionette: pass data from CollectionView to ItemView to ItemView木偶：将数据从 CollectionView 传递到 ItemView 到 ItemView
【发布时间】：2014-03-20 20:21:00
【问题描述】：

使用下面的结构，我成功地将数据从 CollectionView 传递到 ItemView。但是当我尝试将相同的数据传递给子ItemView（并呈现数据）时，数据对象是未定义的。

有什么想法吗？下面是我尝试过的一种方法的代码。

var myView = Backbone.Marionette.CollectionView.extend({
    itemView: myItemView,

    initialize: function(options) {
        this.model = options.model;
    },
    itemViewOptions: function(model,index){
        return{
            viewModel: this.model
        }
    }

});

var myItemView = Backbone.Marionette.ItemView.extend({
    template: _.template(Template),

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

    onRender: function(options) {
            // I thought the line below was a method for passing options from one ItemView into another.
        var view = new mySecondItemView ({model: this.viewModel});
        view.render();

        var temp = this.$el["0"]['innerHTML'];
            // The line below proves to my satisfaction that the ItemView is receiving the data model from the CollectionView
        temp += this.viewModel.get("property_name");
        this.$el["0"]['innerHTML'] = temp;
    }
});


var mySecondItemView = Backbone.Marionette.ItemView.extend({

        // And I thought I could set the viewModel in this function by assigning it the value of the model that was passed through the options.
    initialize: function(options) {
        this.viewModel = options.model;
    },

        // Finally I expect to be able to display information from the data model in the following way. The line below is what tips me off the the fact that viewModel in this second, sub-ItemView is undefined.
    template: _.template('<p><%= this.viewModel.get("property_name") %></p>')
});

【问题讨论】：

为什么 CollectionView 没有集合只有模型？

标签： backbone.js marionette

【解决方案1】：

使用下面的代码，我可以通过仅声明属性名称来访问子ItemView 中模型的属性，因此我可以写<%= property_name %> 而不是this.model.get("property_name")。

var myView = Backbone.Marionette.CollectionView.extend({ /* Nothing changes here */ });

var myItemView = Backbone.Marionette.ItemView.extend({
    template: _.template(Template),

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

    onRender: function(options) {
            // This does indeed pass the data to the sub-ItemView
        var view = new mySecondItemView ({model: this.viewModel});
        view.render();

        var temp = this.$el["0"]['innerHTML'];
            // The line below pulls the HTML rendered in the sub-ItemView
        temp += '<div class="content">'+view.$el['0']['innerHTML']+'</div>';
        this.$el["0"]['innerHTML'] = temp;
    }
});


var mySecondItemView = Backbone.Marionette.ItemView.extend({

        // Display a property like so...
    template: _.template('<p><%= property_name %></p>')
});

【讨论】：