So übergeben Sie Parameter an eine Ansicht

Ich habe eine Reihe von Schaltflächen, die beim Klicken ein Popup-Menü direkt unter der Schaltfläche anzeigen. Ich möchte die Position der 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?
    }
});

Sie müssen nur den zusätzlichen Parameter übergeben, wenn Sie die MenuView erstellen. Die initializeFunktion muss nicht hinzugefügt werden.

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

Und dann MenuViewkönnen Sie in verwenden this.options.position.

UPDATE: Da @mu zu kurz ist , fügen Backbone-Ansichten seit 1.1.0 nicht mehr automatisch Optionen hinzu, die als this.options an den Konstruktor übergeben wurden. Sie können dies jedoch selbst tun, wenn Sie dies bevorzugen.

In Ihrer initializeMethode können Sie die übergebenen optionsDaten wie folgt speichern this.options:

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

oder verwenden Sie einige feinere Methoden, wie von @Brave Dave beschrieben .

Fügen Sie ein Optionsargument hinzu zu initialize:

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

Und geben Sie dann einige Optionen ein, wenn Sie Ihre Ansicht erstellen:

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

Für weitere Informationen: http://backbonejs.org/#View-constructor

Ab Backbone 1.1.0 wird das optionsArgument nicht mehr automatisch an die Ansicht angehängt (siehe Ausgabe 2458 für Erläuterungen). 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 dieses Mini-Plugin verwenden , um Optionen auf der weißen Liste automatisch anzuhängen, wie z.

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

von einem anderen Ort passieren

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

Fügen Sie ein Optionsargument hinzu, um die Ansicht zu initialisieren, dass Sie die übergebene Variable erhalten.

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

um den Wert zu erhalten verwenden -

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

Verwenden Sie diese Optionen , um argumentr in der Ansicht abzurufen

 // 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/