Backbone.js事件Not firing

当我单击添加按钮时，无法添加这个东西。我对此完全陌生。Backbone.js事件Not firing

JS代码

function RecipeApp() { 
    var _Ingredient=Backbone.Model.extend(COOKBOOK.Domain.Ingredient), 
    _Ingredients = Backbone.Collection.extend({ 
     model: _Ingredient 
    }), 
    _IngredientView = Backbone.View.extend({ 
     tagName: "li", 
     initialize: function() { 
      this.model.bind("change", this.render, this); 
     }, 
     render: function() { 
      var templateid = this.model.get('ViewID'); 
      $(this.el).html(Mustache.to_html($("#"+templateid).html(),this)); 
     } 
    }), 
    _AddView = Backbone.View.extend({ 
     id:"divAddIngredient", 
     events: { 
      "click .btn": "create" 
     }, 
     render: function() { 
      var tmpAddAnIngredient = $("#tmpMasterView").html(), 
      $submain = $("#submain"); 
      $submain.html(Mustache.to_html(tmpAddAnIngredient, COOKBOOK.Domain)); 
     }, 
     initialize: function (ingredients) { 
      console.log("init enter"); 
      this.render(); 
      this._Ingredients = ingredients; 
      this._Ingredients.bind('add', this.add, this); 
      console.log("init leave"); 
     }, 
     //added functions 
     create: function() { 
      console.log("create"); 
      var typename = this.$(".typeName").val(), 
      ingredient = _.detect(COOKBOOK.Domain.Ingredients, function (i) { i.TypeName === typename }); 

      if (!!ingredient) { 
       this._Ingredients.create(ingredient); 
      } 

     }, 
     add: function (ingredient) { 
      console.log('add'); 
      var view = new _IngredientView(ingredient); 
      this.$("#divIngredients").append(view.render().el); 
     } 
    }); 
    this.Ingredients = new _Ingredients(); 
    this.AddView = new _AddView(this.Ingredients); 
} 
$(function() { 
    window.app = new RecipeApp(); 


    // 

});

这里是胡子模板

<script id="tmpTempDirectoryIngredient" type="text/html"> 
<div class="block-message"> 
<form> 
    <fieldset> 
     <legend>Create a Temporary Directory</legend> 

    <div class="clearfix"> 
      <input type="text" name="DirectoryName" class="DirectoryName" /> 
    </div> 
    </fieldset> 
</form> 
</div> 
</script> 
<script id="tmpMasterView" type="text/html"> 
<div class="block-message info" id="divAddIngredient"> 
    <form> 
    <fieldset> 
     <legend>Add an Ingredient</legend> 

    <div class="clearfix"> 
     <select class="typeName"> 
      {{#Ingredients}} 
      <option value="{{TypeName}}">{{Name}}</option> 
      {{/Ingredients}} 
     </select> 
    </div> 
    <div class="clearfix"> 
     <input type="button" class="btn primary" value="Add Ingredient" /> 
    </div> 
    </fieldset> 
</form> 
</div> 
<hr /> 
<div id="divIngredients"> 

</div> 
</script>

来源

2011-09-20 Micah

只要我明确地将_AddView的el属性设置为创建_AddView时存在的标记，它就开始工作。

来源

2011-09-22 13:10:41 Micah

您传递成分到_AddView初始化方式，他们将可以访问由this.options（见http://documentcloud.github.com/backbone/#View-constructor）。

我认为更好的办法是通过您的收藏配料到你_AddView这样的：

this.AddView = new _AddView({collection: this.Ingredients});

那么你的视图的定义中，总是指this.collection而不是this._Ingredients。这是我认为更标准的方式来做到这一点。

来源

2011-09-20 14:33:18 timDunham

谢谢你给我提示 - 非常感谢。 – Micah

$(function(){ 
    new Apps({el:$("body"),'records':[1,2,3,4,5]});  
});

这里需要给出el。

因为只有在DOM生成后.....

来源

2012-05-31 20:18:53

Backbone.js事件Not firing

回答

相关问题