主幹模板入門：如何從append（）轉到使用模板

Question

這是關於如何開始使用模板的一個非常基本的問題。這是從字面上我第一次使用骨幹所以，關於如何提高我的代碼進行任何指針讚賞：

例子是在這裏：http://jsfiddle.net/H93Ej/12/

以下片段：

addFurnitureLi: function (model) { 
     // Add a new piece of furniture to the DOM list 
     $("#furniture-list").append("<li>" + model.get('name') + "</li>"); 
    } 

我想去使用append()使用模板是這樣的：

<script id="furnitureTemplate" type="text/html"> 

    <li>{{ name }}</li> 

</script> 

但我失去了對如何在現代單片機集成e腳本模板放入addFurnitureLi函數。另外，我覺得基本上addFurnitureLi函數是在頁面上「呈現」HTML，所以我還有另外一個問題 - 函數和「官方」函數有什麼區別？

謝謝你的教育！

完整的應用程序代碼被列舉如下：

(function($) { 

    Furniture = Backbone.Model.extend({ 
     defaults: { 
      "name" : null, 
      "quantity" : 1 
     } 
    }); 

    Furnitures = Backbone.Collection.extend({  
     initialize: function (models, options) { 
      this.bind("add", options.view.addFurnitureLi); 
      //Listen for new additions to the collection and call a view function if so 
     } 
    }); 

    FurnitureView = Backbone.View.extend({ 
     el: $("body"), 
     initialize: function() { 
      this.furnitures = new Furnitures(null, { view: this }); 
     }, 
     events: { 
      "click .furniture-add": "addFurnitureModel", 
     }, 
     addFurnitureModel: function (ev) { 
      // Add a piece of furniture to the model 
      var furnitureName = $(ev.currentTarget).data('name'), 
       furnitureModel = new Furniture({ name: furnitureName }); 

      this.furnitures.add(furnitureModel); 
     }, 
     addFurnitureLi: function (model) { 
      // Add a new piece of furniture to the DOM list 
      $("#furniture-list").append("<li>" + model.get('name') + "</li>"); 
     } 
    }); 


    var furnitureView = new FurnitureView; 

})(jQuery); 

Answer 1

臂架shakah-lakah。

因爲你的模板腳本的ID爲furnitureTemplate：

<script id="furnitureTemplate" type="text/html"> 

    <li>{{ name }}</li> 

</script> 

這工作得很好：

addFurnitureLi: function (model) { 
     // Add a new piece of furniture to the DOM list 
     $('#furniture-list').append(ich.furnitureTemplate(model.toJSON())); 
}