backbone.js事件綁定破壞單選按鈕功能

Question

我是Backbone.js的新手，但我確信我正在做這件事。

這是我的看法骨幹和模型：

//用戶模型

var User = Backbone.Model.extend({ 
    defaults: { 
     UserID: 0, 
     FirstName: "", 
     LastName: "", 
     Assignment: 0, 
     Selected: false 
    }, 


    toggle: function(){ 
     var value = this.get("Selected"); 
     this.set({ Selected : !value }); 
    } 

}); 

//用戶視圖

var UserView = Backbone.View.extend({ 
    parentview: null, // the parent view 

    initialize: function() { 
     this.parentview = this.options.parentview 
     this.template = $("#user-template") 

     this.model.bind("change", this.render, this); 
    }, 

    render: function() { 
     var content = this.template.tmpl(this.model.toJSON()); 
     $(this.el).html(content); 

     return this; 
    }, 

    events: { 
     "click ul li": "toggle" 
    }, 

    toggle: function() { 
     this.model.toggle(); 
    } 

}); 

這裏是我使用每個JQuery的模板用戶的觀點。視圖呈現在另一個大視圖內，即集合。

<ul id="user-container" 
    {{if Selected == 1 }} class="selected" {{/if}} 
> 
    <li class="col1" {{if Selected == 0}} style="visibility:hidden" {{/if}} > 
     <img src="@Content.ImageUrl("pin-icon.png", "base")" /> 
    </li> 
    <li class="col2">${FirstName} ${LastName} </li> 
    <li class="col3-last"> 
     <input id="radio-${$item.view}-PM-${UserID}" name="radio-${$item.view}-${UserID}" type="radio" value="1" class="button" 
      {{if Assignment == 1}} checked="checked" {{/if}} 
     /> 
     <label for="radio-${$item.view}-PM-${UserID}"> 
      PM</label> 
     <input id="radio-${$item.view}-SV-${UserID}" name="radio-${$item.view}-${UserID}" type="radio" value="2" class="button" 
      {{if Assignment == 2 }} checked="checked" {{/if}} 
     /> 
     <label for="radio-${$item.view}-SV-${UserID}"> 
      STAFF</label> 
     <input id="radio-${$item.view}-NA-${UserID}" name="radio-${$item.view}-${UserID}" type="radio" value="0" class="button" 
      {{if Assignment == 0 }} checked="checked" {{/if}} 
     /> 
     <label for="radio-${$item.view}-NA-${UserID}"> 
      NONE</label> 
    </li> 
</ul> 

在過去li我有三個單選按鈕，動態ID和相同的名稱（也是動態的）。每個按鈕都有自己的標籤。

所有工作都很好，單選按鈕正在選擇並正常工作，直到我在視圖的事件中添加了此行"click ul": "toggle"。

該事件起作用，當我單擊視圖中每個用戶的行時，模型將被更新並且用戶被選中/取消選擇。

唯一的問題是，用這條線，單選按鈕不起作用。 設置了這些值，但是當我嘗試更改該值時沒有任何反應（單擊另一個單選按鈕）。

在瀏覽器控制檯，這是奇怪的未產生錯誤......

修正：當我點擊一個單選按鈕，將觸發從骨幹視圖的單擊事件中，選擇正在做，但按鈕保持未選中狀態。似乎骨幹接管了，但我想要的只是當我點擊ul部分而不是其他內部元素，如按鈕等時觸發。

但是，當我單擊按鈕的標籤時，什麼都沒發生。沒有骨幹事件被觸發，並且沒有選擇按鈕。

任何人都知道爲什麼會發生這種情況？

Answer 1

複選框在用戶界面中沒有更改，因爲無論何時單擊複選框，click事件都會傳播到「li」元素並調用切換回調函數。當調用切換回調函數時，您將重新渲染整個視圖，並且由於您的用戶模型的「分配」屬性未被更改，所以您將使用與「檢查」狀態相同的視圖重新渲染視圖之前。

您可以通過單選按鈕初始化時阻止click事件的傳播來解決此問題。例如，下面的單選按鈕，單擊處理程序添加到您的視圖：

 events: { 
      "click input[type=radio]": "onRadioClick", 
      "click ul li": "toggle" 
     }, 

     onRadioClick: function (e) { 
      e.stopPropagation(); 
      this.model.set({ Assignment: $(e.currentTarget).val() }, {silent:true}); // {silent: true} is optional. I'm only doing this to prevent an unnecessary re-rendering of the view 
     }, 

只要單擊單選按鈕這將攔截單擊事件並防止您切換回調被調用。請注意，我還更新了用戶模型中的Assignment屬性，以便下次您的視圖重新呈現時，您的檢查狀態將被正確設置。