11

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

},

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

4

4 回答 4

29

在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.

于 2012-08-22T02:51:59.630 回答
12

更简单的解决方案使用构造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

于 2014-01-14T14:42:51.183 回答
1

我认为这更简单

在你看来

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

对于小部件的集合。

于 2014-05-20T11:43:55.367 回答
0

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

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

请务必在适当的类上调用它，例如CompositeView而不是ItemView，因为 Marionette 2.2 SerializeDatafn 已更改为将实现逻辑传递给特定函数，并且并非所有类都可用

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

于 2014-11-03T09:35:35.647 回答