2012-01-29 86 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(或其他)可能有些错误。在处理程序到达结束之前,脚本可以停止。