骨干木偶：templateHelpers 和 itemViewOptions答案

【问题标题】：Backbone Marionette: templateHelpers and itemViewOptions骨干木偶：templateHelpers 和 itemViewOptions
【发布时间】：2012-08-21 15:49:03
【问题描述】：

我遇到了 Backbone Marionette 和 ItemView 渲染的问题。我需要将一个值从复合视图传递给它的每个项目视图。该值正确包含在项目视图的选项数组中，但是我无法从 templateHelpers 方法访问它。

所以我尝试将其设置为我的视图的值，但是当我渲染数组时，它返回一个“未定义”值。

复合视图

var TableView = Backbone.Marionette.CompositeView.extend({
....
    itemViewOptions: {
        foo: "bar",
    },

项目视图

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

template: RowTemplate,
tagName: "tr",
foo: "",

initialize: function(){

    this.foo = this.options.foo;              
},

templateHelpers: {  

     foo: function(){
         return this.foo;
     }

},

我做错了什么？如何访问该值并将其提取到模板中？谢谢。

【问题讨论】：

标签： backbone.js marionette

【解决方案1】：

在templateHelpers 函数中，this 变量是从serializeData 方法返回的对象。要将itemViewOptions 放入templateHelpers，则需要修改项目视图上的serializeData 方法：


ItemView.extend({

  // ...

  serializeData: function(){
    // call the super method
    var data = Backbone.Marionette.ItemView.prototype.serializeData.apply(this, arguments);

    // augment the data the way you need
    data.foo = this.options.foo;

    // send back your custom data
    return data;
  }


});

这将使您的数据在templateHelpers 中可用。

【讨论】：

正是我需要在 spark 模板中添加一个选项。

【解决方案2】：

更简单的解决方案使用构造templateHelpers: function(){return {}}，示例：

var RowView = Backbone.Marionette.ItemView.extend({
    // ...
    templateHelpers: function(){  
        return {
            foo: this.foo
        }
    },
    // ...
})

以及用于数据：

var RowView = Backbone.Marionette.ItemView.extend({
    // ...
    templateHelpers: function(){
        var foo = this.foo  // context is view
        return {
            something: function(){ 
                return this.name + " " + foo  // context is data object
            }
        }
    },
    // ...
})

文档：https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.view.md#object-or-function-as-templatehelpers

【讨论】：

要在模板中调用这个函数，我会这样调用它：something()?

【解决方案3】：

我觉得这个比较简单

在你看来

var RowView = Backbone.Marionette.ItemView.extend({
...
 initialize: function(options){
            this.options = options;
        },
        options: {},
  templateHelpers: function(){
        var foo = this.options.foo;
....

}

这样做的好处是，如果您有其他想要传递值的东西，他们可以从选项中获取，例如在我的一个观点中

 className: function(){ return this.options.size + "-widget"; }

用于小部件的集合。

【讨论】：

【解决方案4】：

当你按照 Derick 的建议调用超级方法时

var data = Backbone.Marionette.ItemView.prototype.serializeData.apply(this, arguments);

一定要在像CompositeView这样的正确类上调用它，而不是ItemView，因为自从Marionette 2.2以来，SerializeData fn 已更改为将实现逻辑传递给特定函数，并非所有函数都可用类

或者，如果您使用的是 CoffeeScript，您可以致电 data = super(arguments)

【讨论】：