Магическая сетка: templateHelpers и itemViewOptions

У меня возникла проблема с рендерингом Магионной сетки и рендеринга ItemView. Мне нужно передать значение из Composite View для каждого из элементов Item View. Значение корректно содержится в массиве параметров представления элемента, однако я не могу получить к нему доступ из метода templateHelpers.

Поэтому я попытался установить его как значение моего представления, но когда я выдаю массив, он возвращает значение "undefined".

Композитный вид

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

},

Что я делаю неправильно? Как я могу получить доступ к значению и выбрать его в шаблон? Спасибо.

Ответы

Ответ 1

В функциях templateHelpers переменная this - это объект, который был удален из метода serializeData. Чтобы получить itemViewOptions in в 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.

Ответ 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

Ответ 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)