0

这是关于如何开始使用模板的一个非常基本的问题。这实际上是我第一次使用骨干网，因此对如何改进我的代码的任何其他指示表示赞赏：

示例在这里：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函数中。另外，我觉得这个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);
4

1 回答 1

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() ) );
 }
于 2013-04-26T18:24:18.287 回答