javascript – 按钮Onclick事件和backbone.js视图

2019-07-11 21:34:50 阅读：215 来源： 互联网

标签：javascript backbone-js backbone-views backbone-events

我目前有一个html文件,其中包含以下内容：

<div class="button1">

    <button class="first" id="up" onclick="tranistionUp">
       Go Up
    </button>

    <button class="last" id="down" onclick="tranistionDown">
       Go Down
    </button>
</div>

我在backbone.js视图文件中有以下内容：

var BlahView = BackBone.View.extend({
  initialize:function(){},
  blah...
  blah...
 transitionUp: function(){
    blah...
 },
 tranistionDown: function(){
},
render:function (){
    blah....
}; 
});

当我点击按钮时,我看到两个功能都有一个未定义的功能错误,我是骨干的新手,任何帮助都会很棒.

解决方法:

您应该在Backbone.View中设置事件处理程序.

HTML(将id =“myButtons”添加到容器div)

<div class="button1" id="myButtons">
  <button class="first" class="button-up">Go Up</button>
  <button class="last" class="button-down">Go Down</button>
</div>

JavaScript(添加的事件)

var BlahView = Backbone.View.extend({

  events: {
    "click .button-up": "transitionUp",
    "click .button-down": "tranistionDown",
  },

  transitionUp: function() {
    console.log("Transition up");
  },

  tranistionDown: function() {
    console.log("Transition down")
  }

});

var blahView = new BlahView({ el: $('#myButtons') });

通过指定onclick属性,您的浏览器需要在全局范围内使用名为transitionUp和transitionDown的函数.您的方法在对象中定义.通常不鼓励使用HTML属性绑定事件处理程序,尤其是在使用Backbone时(因为您无法轻松地将事件绑定到视图的特定实例).

标签：javascript,backbone-js,backbone-views,backbone-events
来源： https://codeday.me/bug/20190711/1436082.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 按钮Onclick事件和backbone.js视图