BACKBONE.JSイベントで

Question

をトグルを実装し、私たちはjqueryの中でそれを行うのと同じ方法で、バックボーンで可逆的なアニメーションを実装したいと思います：

$('a.contact').toggle(
function(){ 
    // odd clicks 
}, 
function(){ 
    // even clicks 
}); 

私の質問は、バックボーンのイベント構文でこれを行う方法であります？ どのように機能、機能設定を模倣するのですか？

events : { 
    'click .toggleDiv' : this.doToggle 
}, 

doToggle : function() { ??? } 

Answer 1

バックボーンのビューイベントは、jQueryに直接委任され、コールバックメソッドを介してすべての標準DOMイベント引数にアクセスできます。だから、あなたは簡単に要素にjQueryのトグルメソッドを呼び出すことができます。

Backbone.View.extend({ 

    events: { 
    "click a.contact": "linkClicked" 
    }, 

    linkClicked: function(e){ 
    $(e.currentTarget).toggle(
     function() { 
     // odd clicks 
     }, 
     function() { 
     // even clicks 
     } 
    ); 
    } 

}); 

Answer 2

イベントを受け取るビュー内で切り替えたい要素はありますか？その場合：

Answer 3

私は実際にeventsを使用してこれを行うだけでは、一緒に実際の流量を維持するためにtriggerを追加することであると信じています。このようにトグルを使用しなければならないのは正直なところでは少しぎこちないようです。

Backbone.View.extend({ 

    events: { 
    "click .button": "doToggle" 
    }, 

    doToggle: function(e){ 
    var myEle = $(e.currentTarget); 
    $(e.currentTarget).toggle(
     function() { 
     // odd clicks 
     }, 
     function() { 
     // even clicks 
     } 
    ); 
    myEle.trigger('click'); 
    } 

}); 

それはちょうど私がこの問題の解決策を探していたと私はちょうどそれについて昔ながらの方法を行ってきました

Backbone.View.extend({ 

    el: '#el', 

    initalize: function() { 
    this.render(); 
    }, 

    doToggle: { 
    var myEle = this.$el.find('.myEle'); 
    myEle.toggle(
     function() { 
     // odd clicks 
     }, 
     function() { 
     // even clicks 
     } 
    ); 
    }, 

    render: function(e){ 


    //other stuff 

    this.doToggle(); 

    return this; 
    } 

}); 

Answer 4

を使用するために、おそらくクリーナーです。私はまた私のhideText（）メソッドを私のアプリの他のビューから見つけることができるようにしたかった。

他のビューから 'showmeState'のステータスを確認し、hideText（）またはshowText（）を実行することができます。私は、以下のコードをレンダリングと初期化のようなものを取り除いて単純化し、例をより明確にしようとしました。

var View = Backbone.View.extend({ 
    events: { 
    'click': 'toggleContent' 
    }, 
    showmeState: true, 
    toggleContent: function(){ 
    if (this.showmeState === false) { 
     this.showText(); 
    } else { 
     this.hideText(); 
    } 
    }, 
    hideText: function() { 
    this.$el.find('p').hide(); 
    this.showmeState = false; 
    }, 
    showText: function() { 
    this.$el.find('p').show(); 
    this.showmeState = true; 
    } 
}); 

var view = new View();