백본 템플리트 시작하기 : append()에서 템플리트 사용 방법

Question

이것은 템플리트 사용을 시작하는 방법에 대한 매우 기본적인 질문입니다.

예는 여기에 있습니다 : :

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

내가 싶습니다 : 다음 코드에 대한 http://jsfiddle.net/H93Ej/12/

이 그대로 내 처음 사용 백본 그렇게 내 코드를 개선하는 방법에 대한 추가 포인터 감사합니다입니다

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

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

</script> 

하지만 난 abov를 통합하는 방법에 관한 잃었어요 : append()를 사용에서이 같은 템플릿을 사용하여 이동 전자 스크립트 템플릿을 addFurnitureLi 함수로 복사하십시오. 또한, 본질적으로 addFurnitureLi 함수가 페이지에서 HTML을 "렌더링"하는 것처럼 느껴 지므로 다른 질문이 있습니다.이 함수와 "공식적인"render 함수의 차이점은 무엇입니까?

나를 교육시켜 주셔서 감사합니다!

(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())); 
}