Question

<script id="entry-template" type="text/x-handlebars-template">
        <h2>This is the template</h2>
        {{ count }} items
    </script>
    <script type="text/javascript">
        var MyNamespace = {};

        $(document).ready(function () {

            MyNamespace.Recipe = Backbone.View.extend({
                tagName: "li",
                render: function () {
                    return this.$el.text("Chicken Chilly");
                }
            })


            MyNamespace.MyTagView = Backbone.View.extend({

                initialize: function () {
                    this.render();
                },
                render: function () {
                    var template = Handlebars.compile($("#entry-template").html());
                    this.$el.html(template);
                    return this;
                },
                count: 4
            });
            var View = new MyNamespace.MyTagView();
            $("#content").html(View.el);
        });


    </script>

我将输出设为0项，而不是4项

Answer 1

在这一行：

template: template('entry-template'),

您正在生成已编译模板的html和'entry-template'上下文对象（它不是id，它是模板的值对象）。生成该html后，您将其分配给template

的MyNamespace.MyTagView属性

稍后，在render方法中，您正在调用此模板属性（即html），因为它是一个函数：

this.$el.html(this.template(this));

但它不是一个函数，而是一个包含生成的html的属性。

你应该像这样分配模板：

template: template,

查看未提供所需的输出

1 个答案: