En utilisant Backbone.Marionette, pourquoi ne puis-je pas référencer les éléments @ui lors de la création d'une nouvelle instance d'une vue?

Question

J'ai créé une vue simple, MyView, qui s'étend de ItemView. Ensuite, lorsque je crée l'instance de MyView, j'essaie d'ajouter des références aux éléments d'interface utilisateur dans la vue ainsi qu'aux événements qui utilisent ces éléments d'interface utilisateur.

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(); 

Je reçois l'erreur suivante dans la console:

Uncaught TypeError: Cannot read property 'changeModelNameButton' of undefined

J'ai remarqué que si je déplace les déclarations d'ui vers la définition de vue, cela fonctionne bien, mais j'aimerais savoir pourquoi je ne peux pas les ajouter quand je crée l'instance. N'y a-t-il aucun moyen de les ajouter à l'instance ou ai-je oublié quelque chose?

Note: J'utilise Backbone 1.3.3, 2.4.4 Marionette, Souligné 1.8.3 et jQuery 3.1.1

Answer 1

propriétés d'options vue impérieuses

pas toutes les options sont automatiquement impérieuses les propriétés de classe de vue lorsqu'elles sont transmises lors de l'instanciation.

ui ressemble à ce n'est pas l'un d'entre eux.

Backbone appliquera automatiquement les (privé) viewOptions sur une vue:

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

Dans le constructeur de vue, this est étendue avec les options choisies (source):

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

Comment passer l'option ui?

Vous devez soit mettre le hachage ui dans la définition de classe de vue, soit appliquer le hachage ui vous-même. Les options passées à une vue sont available in this.options automatically.

---

Quel est le véritable objectif?

Si vous voulez déranger le ui et le events avec ses rappels, , il serait préférable de définir une nouvelle vue.

Il ressemble à un XY problem où le vrai problème réside dans l'architecture de l'application, mais nous ne pouvons pas aider puisque vous demandez ce qui vous bloque en ce moment.