Использование Backbone.Marionette, почему я не могу ссылаться на элементы @ui при создании нового экземпляра представления?

Question

Я создал простой вид, MyView, который простирается от ItemView. Затем, когда я создаю экземпляр MyView, я пытаюсь добавить ссылки на элементы пользовательского интерфейса в представлении, а также события, которые используют эти элементы интерфейса.

HTML

<div id="container"></div> 

<script type="text/template" id="my-template"> 
    <p>This is a rendered template.</p> 
    <button data-ui="changeModelNameButton">Change Model Name</button> 
</script> 

JS

// Define a custom view that extends off of ItemView 
var MyView = Marionette.ItemView.extend({ 
    template: "#my-template" 
}); 

// Instantiate the custom view we defined above 
var view = new MyView({ 
    el: "#container", 

    ui: { 
    changeModelNameButton: '[data-ui~=changeModelNameButton]' 
    }, 

    events: { 
    'click @ui.changeModelNameButton': function() { 
     alert('here'); 
    } 
    } 
}); 

// Render the view in the element defined within the custom view instantiation method 
view.render(); 

Я получаю следующее сообщение об ошибке в консоли:

Uncaught TypeError: Cannot read property 'changeModelNameButton' of undefined

Я заметил, что если я переместил объявления ui в определение представления, он отлично работает, но я хотел бы знать, почему я не могу добавить их при создании экземпляра. Нет ли способа добавить их в экземпляр, или я чего-то не хватает?

Примечание: Я использую Backbone 1.3.3, 2.4.4 марионеток, подчёркивание 1.8.3 и JQuery свойства 3.1.1

Answer 1

Опции Переопределение Просмотр в

Не все опции автоматически перекрывая свойства класса представления при передаче по экземпляру.

ui похоже, что это не один из них.

Backbone автоматически применяются следующие (частный) viewOptions на вид:

// List of view options to be set as properties. 
var viewOptions = [ 
    'model', 
    'collection', 
    'el', 
    'id', 
    'attributes', 
    'className', 
    'tagName', 
    'events' 
]; 

По мнению конструктора, this удлиняется с выбранными опциями (source):

_.extend(this, _.pick(options, viewOptions)); 

Как передать опцию ui?

Вам необходимо либо поставить галочку ui в определение класса просмотра, либо применить сам хэш ui.

var MyView = Marionette.ItemView.extend({ 
    template: "#my-template", 
    initialize: function(options) { 

     // merge the received options with the default `ui` of this view. 
     this.ui = _.extend({}, this.ui, this.options.ui); 
    } 
}); 

Обратите внимание, что параметры, переданные на просмотр, равны available in this.options automatically.

---

Какова реальная цель этого?

Если вы собираетесь испортить ui и events с его обратными вызовами, , было бы лучше всего определить новый вид.

Это выглядит как XY problem, где настоящая проблема заключается в архитектуре приложения, но мы не можем помочь, так как вы спрашиваете о том, что блокирует вас прямо сейчас.