Question

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

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

复合视图

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;
     }

},

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

Answer 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。

中提供您的数据

Answer 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

Answer 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"; }

用于小部件集合。

Answer 4

当您调用Derick建议的超级方法时

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

请务必在CompositeView而不是ItemView等适当的类上调用它，因为自从Marionette 2.2 SerializeData fn已被更改为将实现逻辑传递给特定函数而不是全部所有类别中都有

或者，如果您使用的是CoffeeScript，则可以拨打data = super(arguments)

Backbone Marionette：templateHelpers和itemViewOptions

4 个答案: