web-dev-qa-db-ja.com

ビューにパラメーターを渡す方法

クリックすると、ボタンのすぐ下にポップアップメニューが表示される一連のボタンがあります。ボタンの位置をビューに渡したいです。どうやってやるの？

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?
    }
});
javascriptbackbone.js
93
vikmalhotra

MenuViewを作成するときに、追加のパラメーターを渡すだけです。 initialize関数を追加する必要はありません。

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

そして、MenuViewでは、this.options.positionを使用できます。

UPDATE：@ muは短すぎる状態 、1.1.0以降、 バックボーンビューは自動的にアタッチされませんthis.optionsとしてコンストラクタに渡されるオプションですが、必要に応じて自分で行うことができます。

したがって、initializeメソッドでは、this.optionsとして渡されたoptionsを保存できます。

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

または @ Brave Daveによって記述 のように、より細かい方法を使用します。

167
dira

オプション引数を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

46
mu is too short

バックボーン1.1.0の時点で、options引数は もはやアタッチされていません ビューに自動的にあります（議論については issue 2458 を参照）。次に、各ビューのオプションを手動で添付する必要があります。

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

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

または、 this mini plugin を使用して、ホワイトリストに登録されたオプションを次のように自動添付できます。

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