jquery - バックボーン テンプレートの開始: 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>

addFurnitureLiしかし、上記のスクリプト テンプレートを関数に統合する方法がわかりません。また、本質的に関数はページ上で HTML を「レンダリング」しているように感じるaddFurnitureLiので、別の質問があります。その関数と「公式」関数の違いは何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);