Как передать параметры в представление

93

У меня есть ряд кнопок, при нажатии на которые отображается всплывающее меню, расположенное чуть ниже кнопки. Я хочу передать положение кнопки представлению. Как я могу это сделать?

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?
    }
});
Викмалхотра
источник

Ответы:

168

Вам просто нужно передать дополнительный параметр при создании MenuView. Не нужно добавлять initializeфункцию.

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

А затем, в MenuView, вы можете использовать this.options.position.

ОБНОВЛЕНИЕ: поскольку @mu - слишком короткие состояния , начиная с версии 1.1.0, Backbone Views больше не присоединяет автоматически параметры, переданные конструктору как this.options, но вы можете сделать это самостоятельно, если хотите.

Итак, в вашем initializeметоде вы можете сохранить optionsпереданное как this.options:

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

или используйте более тонкие способы, как описано @Brave Dave .

дира
источник
1
Это работает отлично, просто добавьте параметр в свой метод инициализации представления: initialize: function (options) {alert (options.position); }
Cabuxa.Mapache
@ Cabuxa.Mapache Нет, не работает. Этот ответ использует this.options.position, а не options.position. Представления использовались для присоединения initializeаргументов, this.optionsно это перестало происходить в 1.1.0.
mu слишком короткое
46

Добавьте аргумент options в initialize:

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

А затем передайте некоторые параметры при создании своего представления:

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

Для получения дополнительной информации: http://backbonejs.org/#View-constructor

mu слишком короткий
источник
это более элегантно / просто для большинства ситуаций.
Cullen SUN
@CullenSUN: Спасибо. Я предпочитаю ясность этого подхода, магическое «действие на расстоянии» использования this.optionsвызывает у меня кошмары при обслуживании и отладке.
mu слишком короткое
Сначала я увидел ссылку Backbone, но ваш пример прояснил это для меня. Спасибо
Мануэль Эрнандес
Это устарело, и вы больше не можете его использоватьthis.options
Поездка
4
@Trip: А? initialize: function(options) { ... }это нормально, изменение состоит в том, что Backbone больше не устанавливает this.optionsдля вас автоматически : «Backbone Views больше не присоединяет автоматически параметры, переданные в конструктор как this.options, но вы можете сделать это сами, если хотите». .
mu слишком короткий
12

Начиная с backbone 1.1.0, optionsаргумент больше не прикрепляется автоматически к представлению (см. Обсуждение в проблеме 2458 ). Теперь вам нужно вручную прикрепить параметры каждого вида:

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

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

В качестве альтернативы вы можете использовать этот мини-плагин для автоматического добавления параметров из белого списка, например:

MenuView = Backbone.View.extend({
    options : ["position", ...] // options.position will be copied to this.position
});
Храбрый Дэйв
источник
-1

перейти из другого места

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

Добавьте аргумент параметров для инициализации, чтобы получить эту переданную переменную,

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

чтобы получить ценность использования -

   var v = new ItemView({ pos: this.options.positions});
Имтиаз Мирза
источник
5
пишите улучшенные ответы, а не коллективные.
Konga Raju
Это улучшенный ответ!
Имтиаз Мирза
-2

Используйте this.options для получения аргумента в представлении

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

Рабочий пример: http://jsfiddle.net/Cpn3g/1771/

Нишант Кумар
источник