與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一起使用鬍子時事件不起作用

回答

相關問題