Як передати параметри у подання


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

Додайте аргумент параметрів до 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


це більш елегантно / просто для більшості ситуацій.
Cullen SUN

@CullenSUN: Дякую. Я віддаю перевагу чіткості цього підходу, магічна "дія на відстані" використання this.optionsдає мені підтримку та налагодження кошмарів.
мю занадто коротке

Я спочатку побачив посилання Backbone, але ваш приклад мені це пояснив. Дякую
Мануель Ернандес

Це застаріло, і ви більше не можете ним користуватисяthis.options
Поїздка

4
@Trip: Так? initialize: function(options) { ... }це нормально, зміна полягає в тому, що Backbone більше не встановлюється автоматично this.optionsдля вас: "Backbone Views більше не автоматично додає параметри, передані до конструктора як this.options, але ви можете зробити це самі, якщо хочете." .
mu занадто короткий

12

Починаючи з основної версії 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()
})

Додайте аргумент options для ініціалізації з огляду на те, що ви отримуєте цю передану змінну,

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/

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.