So übergeben Sie Parameter an eine Ansicht

Lesezeit: 3 Minuten

Benutzer-Avatar
Vikmalhotra

Ich habe eine Reihe von Schaltflächen, die beim Anklicken ein Popup-Menü anzeigen, das direkt unter der Schaltfläche positioniert ist. 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?
    }
});

Benutzer-Avatar
dira

Sie müssen nur den zusätzlichen Parameter übergeben, wenn Sie die MenuView erstellen. Keine Notwendigkeit, die hinzuzufügen initialize Funktion.

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

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

AKTUALISIEREN: Da @mu zu kurz ist, heißt es seit 1.1.0, Backbone-Ansichten fügen Optionen, die an den Konstruktor als this.options übergeben werden, nicht mehr automatisch hinzu, aber Sie können dies selbst tun, wenn Sie dies bevorzugen.

Also bei dir initialize Methode können Sie die speichern options bestanden als this.options:

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

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

Benutzer-Avatar
Mu ist zu kurz

Fügen Sie ein Optionsargument hinzu initialize:

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

Und übergeben Sie dann einige Optionen, wenn Sie Ihre Ansicht erstellen:

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

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

  • das ist für die meisten Situationen eleganter/einfacher.

    – Cullen SONNE

    20. Mai 2013 um 4:46 Uhr

  • @CullenSUN: Danke. Ich bevorzuge die Eindeutigkeit dieses Ansatzes, die magische „Fernwirkung“ des Gebrauchs this.options gibt mir Wartungs- und Debugging-Albträume.

    – mu ist zu kurz

    20. Mai 2013 um 4:55 Uhr

  • Ich habe zuerst den Backbone-Link gesehen, aber Ihr Beispiel hat es mir verdeutlicht. Vielen Dank

    – Manuel Hernández

    6. August 2013 um 15:01 Uhr

  • Dies ist veraltet und Sie können es nicht mehr verwenden this.options

    – Reise

    6. Dezember 2013 um 14:26 Uhr

  • @Trip: Hä? initialize: function(options) { ... } ist ganz gut, die Änderung ist, dass Backbone nicht mehr automatisch setzt this.options für dich: “Backbone-Ansichten hängen nicht mehr automatisch Optionen an, die an den Konstruktor als übergeben werden this.optionsaber Sie können es selbst tun, wenn Sie es vorziehen.”.

    – mu ist zu kurz

    6. Dezember 2013 um 15:58 Uhr

Benutzer-Avatar
Tapferer David

Ab Backbone 1.1.0 ist die options Argument ist nicht mehr befestigt automatisch zur Ansicht (vgl Ausgabe 2458 zur Diskussion). Sie müssen nun 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 auf der Whitelist automatisch anhängen, etwa so:

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

Pass von einem anderen Ort

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

Fügen Sie ein Optionsargument hinzu, um es zu initialisieren, da Sie diese übergebene Variable erhalten.

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

um den Wert zu erhalten –

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

Verwenden diese.optionen um Argumentr in Sicht 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/

1178930cookie-checkSo übergeben Sie Parameter an eine Ansicht

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy