So übergeben Sie Parameter an eine Ansicht

Question

Ich habe eine Reihe von Schaltflächen, die beim Klicken auf ein Popup -Menü direkt unter der Schaltfläche angezeigt werden. Ich möchte die Schaltfläche an die Ansicht übergeben. Wie kann ich das machen?

ItemView = Backbone.View.extend({
    tagName: 'li',
    events: {
        'click': 'showMenu'
    },
    initialize: function() {
        _.bindAll(this, 'render');
    },
    render: function() {
    return $(this.el).html(this.model.get('name'));
    },
    showMenu: function() {
        var itemColl = new ItemColl();
        new MenuView({collection: itemColl}); // how to pass the position of menu here?
    }
});

Answer 1

Sie müssen nur den zusätzlichen Parameter übergeben, wenn Sie das Menuview konstruieren. Keine Notwendigkeit, das hinzuzufügen initialize Funktion.

new MenuView({
  collection: itemColl,
  position: this.getPosition()
})

Und dann in MenuView, Sie können verwenden this.options.position.

AKTUALISIEREN: Wie @Mu sind zu kurze Zustände, seit 1.1.0, Backbone -Ansichten fügen Optionen nicht mehr automatisch an, die an den Konstruktor übergeben wurden. Optionen, aber Sie können dies selbst tun, wenn Sie es vorziehen.

Also in deinem initialize Methode können Sie die speichern options bestanden als this.options:

initialize: function(options) {
    this.options = options;
    _.bindAll(this, 'render');
},

oder nutzen Sie einige feinere Wege als beschrieben von @brave Dave.

Answer 2

Fügen Sie ein Optionsargument hinzu zu initialize:

initialize: function(options) {
    // Deal with default options and then look at options.pos
    // ...
},

Geben Sie dann einige Optionen weiter, wenn Sie Ihre Ansicht erstellen:

var v = new ItemView({ pos: whatever_it_is});

Für mehr Informationen: http://backbonejs.org/#view-constructor

Answer 3

Ab dem Rückgrat 1.1.0 die options Argument ist nicht mehr angebracht automatisch zur Ansicht (siehe Ausgabe 2458 zur Diskussion). Sie müssen jetzt die Optionen jeder Ansicht manuell anhängen:

MenuView = Backbone.View.extend({
    initialize: function(options) {
        _.extend(this, _.pick(options, "position", ...));
    }
});

new MenuView({
    collection: itemColl,
    position: this.getPosition(),
    ...
});

Alternativ können Sie verwenden Dieses Mini -Plugin Optionen zur automatischen Antriebsoptionen wie SO:

MenuView = Backbone.View.extend({
    options : ["position", ...] // options.position will be copied to this.position
});

Answer 4

Pass von einem anderen Standort aus

 new MenuView({
   collection: itemColl,
   position: this.getPosition()
})

Fügen Sie ein Optionsargument hinzu, um in der Sicht zu initialisieren. Sie erhalten diese übergebene Variable.

initialize: function(options) {
   // Deal with default options and then look at options.pos
   // ...
},

Um den Wert zu nutzen -

   var v = new ItemView({ pos: this.options.positions});

Answer 5

Verwenden this.options Argumentr in Sichtweise abrufen

 // Place holder
 <div class="contentName"></div>

 var showNameView = Backbone.View.extend({
        el:'.contentName',
        initialize: function(){
            // Get name value by this.options.name
            this.render(this.options.name);
        },
        render: function(name){
            $('.contentName').html(name);
        }
    });

    $(document).ready(function(){
        // Passing name as argument to view
        var myName1 = new showNameView({name: 'Nishant'});
    });

Arbeitsbeispiel: http://jsfiddle.net/cpn3g/1771/