Jak przekazać parametry do widoku

93

Mam szereg przycisków, które po kliknięciu wyświetlają menu podręczne umieszczone tuż pod przyciskiem. Chcę przekazać pozycję przycisku do widoku. Jak mogę to zrobić?

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?
    }
});

javascript backbone.js

— vikmalhotra
źródło

168

Musisz tylko przekazać dodatkowy parametr podczas konstruowania MenuView. Nie ma potrzeby dodawania initializefunkcji.

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

A potem MenuViewmożesz użyć this.options.position.

AKTUALIZACJA: Ponieważ @mu jest zbyt krótkie , od wersji 1.1.0 widoki szkieletu nie dołączają już automatycznie opcji przekazanych do konstruktora jako this.options, ale możesz to zrobić samodzielnie, jeśli wolisz.

Więc w swojej initializemetodzie możesz zapisać optionsprzekazany jako this.options:

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

lub skorzystaj z lepszych sposobów opisanych przez @Brave Dave .

— dira
źródło

53

To już nie działa od wersji 1.1.0: „Widoki szkieletu nie dołączają już automatycznie opcji przekazanych do konstruktora jako this.options, ale możesz to zrobić samodzielnie, jeśli wolisz”. .

— mu jest za krótkie

1

Działa to doskonale, po prostu dodaj parametr do swojego widoku initialize metoda: initialize: function (options) {alert (options.position); }

— Cabuxa.Mapache

@ Cabuxa.Mapache Nie, to nie działa. Ta odpowiedź używa this.options.position, a nie options.position. Widoki były używane do dołączania initializeargumentów, this.optionsale to przestało się dziać w wersji 1.1.0.

— mu jest za krótkie

46

Dodaj argument opcji do initialize:

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

A następnie podaj kilka opcji podczas tworzenia widoku:

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

Więcej informacji: http://backbonejs.org/#View-constructor

— mu jest za krótkie
źródło

jest to bardziej eleganckie / proste w większości sytuacji.

— Cullen NIEDZ

@CullenSUN: Dzięki. Wolę jawność tego podejścia, magiczne „działanie na odległość” przy użyciu this.optionsdaje mi koszmary związane z konserwacją i debugowaniem.

— mu jest za krótkie

Najpierw zobaczyłem łącze Backbone, ale Twój przykład wyjaśnił mi to. Dzięki

— Manuel Hernandez

Ta funkcja została wycofana i nie możesz już jej używaćthis.options

— Wycieczka

4

@Trip: Hę? initialize: function(options) { ... }jest w porządku, zmiana polega na tym, że Backbone nie ustawia już automatycznie this.optionsza Ciebie: „Widoki szkieletu nie dołączają już automatycznie opcji przekazanych konstruktorowi jako this.options, ale możesz to zrobić samodzielnie, jeśli wolisz”. .

— mu jest za krótkie

12

Od wersji szkieletowej 1.1.0 optionsargument nie jest już automatycznie dołączany do widoku (patrz numer 2458 dotyczący dyskusji). Teraz musisz ręcznie dołączyć opcje każdego widoku:

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

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

Alternatywnie możesz użyć tej mini wtyczki do automatycznego dołączania opcji z białej listy, na przykład:

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

— Odważny Dave
źródło

-1

przejść z innej lokalizacji

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

Dodaj argument opcji, aby zainicjować w widoku, że otrzymujesz przekazaną zmienną,

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

aby uzyskać wartość użytkową -

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

— Imtiaz Mirza
źródło

5

napisz poprawione odpowiedzi, a nie zbiorowe.

— Konga Raju,

To ulepszona odpowiedź!

— Imtiaz Mirza

-2

Użyj this.options, aby pobrać argumentr w widoku

 // 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'});
    });

Przykład roboczy: http://jsfiddle.net/Cpn3g/1771/

— Nishant Kumar
źródło