在Backbone.js事件中实现切换

Pet*_*rov 5 javascript jquery backbone.js

我想在Backbone中实现可逆动画,就像我们在jquery中一样:

$('a.contact').toggle(
function(){
    // odd clicks
},
function(){
    // even clicks
});
Run Code Online (Sandbox Code Playgroud)

我的问题是如何在骨干的事件语法中做到这一点?怎么做我模仿功能,功能设置?

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

doToggle : function() { ??? }
Run Code Online (Sandbox Code Playgroud)

Der*_*ley 15

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

});
Run Code Online (Sandbox Code Playgroud)

  • 我不相信这是正确的@Derick.jQuery的两个参数切换将向e.currentTarget添加一个click事件处理程序,它将在偶数/奇数点击上调用这些函数.如果您使用此功能,则每次单击a.contact时,都会再次添加新的处理程序. (5认同)

Fas*_*ani 5

我一直在寻找解决此问题的方法,而我只是以老式的方式进行处理。我还希望能够从应用程序中的其他视图中找到我的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();
Run Code Online (Sandbox Code Playgroud)