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

回答

相關問題