与Backbone.js一起使用胡子时事件不起作用

因此，我正在使用RequireJs，Mustache和Backbone.js制作测试应用程序。用Mustache模板渲染模型集合，我取得了一些成功。但我的小胡子模板有一个按钮，当我尝试绑定视图中按钮上的点击事件时，按钮点击不会调用回调函数。我真的陷入了困境，有人能告诉我我哪里做得不对吗？与Backbone.js一起使用胡子时事件不起作用

这里是我的代码：

ItemView.js：

define(['jquery', 'backbone', 'underscore', 'mustache', '../../atm/model/item'], function ($, Backbone, _, Mustache, Item) { 

var ItemView = Backbone.View.extend({   
    initialize: function() { 
    }, 

    tagName: 'li', 

    events: { 
     'click .button': 'showPriceChange' 
    }, 

    render: function() { 
     var template = $('#template-atm').html(); 
     var itemObj = this.model.toJSON(); 
     itemObj['cid'] = this.model.cid; 

     var rendering = Mustache.to_html(template, itemObj); 
     this.el = rendering; 

     return this; 
    }, 

    showPriceChange: function(event) { 
     alert('Changing...'); 
     $('#' + elemId).empty(); 
     $('#' + elemId).append(document.createTextNode('Changed')); 
    },  
}); 

return ItemView; 
});

atm.html：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Elevator</title> 
    <script data-main="scripts/main" src="scripts/require-jquery.js"></script> 
    <style type="text/css"> 

    </style> 
</head> 

<body> 
    <h1>Vending Machine</h1> 
    <div id="atm-items"> 
    </div> 

    <script id="template-atm" type="html/template"> 
     <li> 
      <p>Item: {{name}}</p> 
      <label for="price-{{cid}}">Price:</label> 
      <input id="price-{{cid}}" type="text" value="{{price}}"/> 
      <button class="button">Change</button> 
      <p id="status-{{name}}-{{cid}}">- -</p> 
     </li> 
    </script> 
</body> 
</html>

来源

2012-06-19 DaHoopster

我认为它做了一个帖子/提交时，当你点击按钮。这是按钮的默认设置。尝试添加'type =“按钮”'并告诉我会发生什么。 – Deeptechtons

没有去:-(我改变了按钮元素为，但仍然没有事件 – DaHoopster

你替换视图的el内render：

render: function() { 
    //... 
    this.el = rendering; 
    //... 
}

当你这样做时，你失去了连接到this.el的jQuery delegate，delegate处理程序（其中Backbone添加的）负责事件路由。

通常情况下，你添加事情this.el而非更换this.el。如果您的模板是这样的：

<script id="template-atm" type="html/template"> 
    <p>Item: {{name}}</p> 
    <label for="price-{{cid}}">Price:</label> 
    <input id="price-{{cid}}" type="text" value="{{price}}"/> 
    <button class="button">Change</button> 
    <p id="status-{{name}}-{{cid}}">- -</p> 
</script>

，那么你会在你的this.$el.append(rendering)视图的render;由于您已将视图的tagName设置为li，因此这会给您一个<li>,this.el。

或者，如果你真的需要保留<li>模板，你可以使用setElement更换this.el，this.$el，并采取事件代表团的护理：

this.setElement(rendering);

想必你包装这一切<li> s在<ul>, <ol>, or <menu>其他地方;如果你不是那么你会产生无效的HTML，并且浏览器可能会尝试为你纠正它，因为你的HTML结构可能不是你的选择器认为的那样，所以这些更正可能会给你带来麻烦。

来源

2012-06-19 19:39:48

Spot on，使用setElement后，事件被正确触发。我猜这个文档对el和setElement有点混乱。谢谢！ – DaHoopster

与Backbone.js一起使用胡子时事件不起作用

回答

相关问题