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

Question

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

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

Answer 1

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

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

そして、で MenuView, 、使用できます this.options.position.

アップデート： として @MUは短い状態です, 、1.1.0以降、 バックボーンビューは、このようにコンストラクターに渡されたオプションを自動的に添付しなくなりましたが、必要に応じて自分で行うことができます。

だからあなたの中で initialize 方法、保存できます options 渡された this.options:

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

または、より細かい方法を使用してください @Brave Daveによって説明されています.

Answer 2

にオプションの引数を追加します 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

Answer 3

バックボーン1.1.0の時点で、 options 議論はです もう添付されていません ビューに自動的に（参照してください 第2458号 ディスカッションのために）。これで、各ビューのオプションを手動で添付する必要があります。

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

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

または、使用することもできます このミニプラグイン SOのように、ホワイトリストされたオプションを自動アタッチする

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

Answer 4

他の場所から通過します

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

Answer 5

使用する this.options 視界でargumprを取得する

 // 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/