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


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

UPDATE:として@muが短すぎる状態である 1.1.0以降、バックボーンビューは、もはや自動的に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 2014

@ 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


これはほとんどの状況でよりエレガント/シンプルです。
カレンサン

@CullenSUN:ありがとう。私はこのアプローチの明確さを好みthis.optionsます。使用する魔法の「遠くでのアクション」は、メンテナンスとデバッグの悪夢を与えてくれます。
muが短すぎる

私は最初にバックボーンリンクを見ましたが、あなたの例はそれを私のために明確にしました。ありがとう
マヌエルヘルナンデス

これは非推奨になり、使用できなくなりましたthis.options
Trip


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

オプション引数を追加して、渡された変数を取得しているビューで初期化します。

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

値を取得するには-

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

5
集合的ではなく改善された回答を書きます。
Konga Raju

これが答えの改善です!
Imtiaz Mirza 2015

-2

使用this.optionsビューでargumentr取得するには

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.