2012-01-29 88 views
5

我有以下幾點看法:複選框仍然選中觸發事件之後

window.DmnView = Backbone.View.extend({ 
     template: _.template($("#tmpl_dmnListItem").html()), 
     events: { 
      "click .getWhois": "showWhois", 
      "click .getDomain": "toBasket" 
     }, 
     initialize: function() { 
      this.model.bind('change', this.render, this); 
      this.model.bind('destroy', this.remove, this); 
      this.bind('toBasket', dmnListApp.toBasket, this); 
     }, 
     render: function() { 
      return $(this.el) 
        .attr("class", this.model.get("free") ? "dmnItem green" : this.model.get("checked") ? "dmnItem red" : "dmnItem red loader") 
        .html(this.template(this.model.toJSON())); 
     }, 
     remove: function() { 
      $(this.el).remove(); 
     }, 
     showWhois: function() { 
      showBoxes(this.model.get("info")); 
      return false; 
     }, 
     toBasket: function() { 
      this.model.toBasket(); 
      this.trigger('toBasket'); 
     } 
    }); 

    window.DmnListApp = Backbone.View.extend({ 
     el: $("#regWrap"), 
     events: { 
      "keypress #dmnName": "checkAll" 
     }, 
     initialize: function() { 
      this.input = this.$("#dmnName"); 
      this.list = this.$("#dmnList"); 
      this.basket = this.$("#dmnBasket"); 
      dmnList.bind('add', this.addOne, this); 
      dmnList.bind('all', this.render, this); 
     }, 
     render: function() { 

     }, 
     addOne: function(dmnItem) { 
      var view = new DmnView({model : dmnItem}); 
      this.list.append(view.render()); 
     }, 
     checkOne: function(name, zone, price, days) { 
      dmnList.create({name: name, zone: zone, price: price, days: days}); 
     }, 
     checkAll: function(e) { 
      var name = this.input.val(); 
      if (!name || e.keyCode != 13) return; 
      if (name == "") 
       name = "yandex"; 
      dmnList.destroyAll(); 
      var zoneList = dmnList.domainsInfo.Name; 
      var costList = dmnList.domainsInfo.CostOrder; 
      var daysList = dmnList.domainsInfo.DaysToProlong; 
      var parent = this; 
      $.each(zoneList, function(key, zone) { 
       parent.checkOne(name, zone, costList[key], daysList[key]); 
      }); 
      this.input.val(""); 
     }, 
     toBasket: function(){ 
      if (this.model.get("inBasket")){ 
       dmnListApp.basket.append($(this.el)); 
      }else{ 
       dmnListApp.list.append($(this.el)); 
      } 
     } 
    }); 

而且我有DmnItem查看下面的模板:

<script id="tmpl_dmnListItem" type="text/template"> 
    <%= checked&&free ? "<input type='checkbox' class='getDomain' />" : ""%><%= name %>.<%= zone %> <%= (free || !checked) ? (checked) ? '<p class="fr">'+price+" руб./"+days+'</p>' : "" : "<a href='#' class='getWhois fr'>WhoIs</a>" %> 
</script> 

DmnView監聽點擊元素上與「getDomain 「班。這個元素是複選框。我點擊這個複選框。在兩個視圖中調用toBasket()方法後,我仍看到未選中的複選框。爲什麼發生這種事?

回答

5

該錯誤在渲染。在爲模型的屬性設置了新的值之後,視圖的渲染函數被調用並且「重新繪製」了複選框(所以,這可能是骨幹的bug - 重新渲染後,複選框的狀態不會保存)。所以我給模板添加了一個簡短的一行,如果需要的話,爲複選框添加「checked」屬性。

+0

它創造了很多問題:( – 2014-11-06 10:07:19

0

函數toBasket(或其他)可能有些錯誤。在處理程序到達結束之前,腳本可以停止。