在Backbone.js事件中實現切換

Question

我想在Backbone中實現可逆動畫，就像在jquery中一樣：

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

我的問題是如何在骨干網事件語法中做到這一點？ 如何模仿功能，功能設置？

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

doToggle : function() { ??? }

Answer 1

Backbone的視圖事件直接委托給jQuery，並允許您通過回調方法訪問所有標准DOM事件參數。 因此，您可以輕松地在元素上調用jQuery的toggle方法：

Backbone.View.extend({

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

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

});

Answer 2

我一直在尋找解決此問題的方法，而我只是以老式的方式進行處理。 我還希望能夠從應用程序中的其他視圖中找到我的hideText（）方法。

因此，現在我可以從任何其他視圖檢查'showmeState'的狀態，並根據我要使用的方法運行hideText（）或showText（）。 我試圖通過刪除諸如render和initialize之類的內容來簡化下面的代碼，以使示例更加清晰。

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

Answer 3

您是否要在視圖中切換的元素接收事件？ 如果是這樣的話：

doToggle: function() {
  this.$("a.contact").toggle()
}

Answer 4

我實際上相信唯一使用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;
  }

});