javascript - 不在模板中显示模型默认值

Question

我有以下 Backbone 应用程序:

在index.html上:

<div class='content'></div>

<div class='container'>
   <script type="type="text/x-handlebars-template"" id="product-template">
       <h2>Products</h2>

       <h3>{{ this.title }}</h3>
   </script>
</div>

和main.js:

$(function() {

var Product = Backbone.Model.extend({
    defaults: {
        title: "Title",
        user_id: 0,
        description: "Description"
    }
});

var ProductView = Backbone.View.extend({
    el: ".content",
    initialize: function() {
        this.render();
    },
    render: function() {
        var source = $('#product-template').html();
        var template = Handlebars.compile(source);
        var html = template(Product.model);
        this.$el.html(html);
    }
});

var productView = new ProductView();

});

它显示“产品”标题，因此模板正在呈现，但没有显示 {{this.title }}。不幸的是，控制台中也没有显示任何错误。

Answer 1

试试这个:

var ProductView = Backbone.View.extend({
    el: ".content",
    model: new Product,
    initialize: function() {
        this.render();
    },
    render: function() {
        var source = $('#product-template').html();
        var template = Handlebars.compile(source);
        var html = template(this.model.toJSON());
        this.$el.html(html);
    }
});

打印

{{ title }}