Question

我正在尝试以html格式显示单个模型获取结果

这是我的脊椎.js部分：

window.Category = Backbone.Model.extend({
    urlRoot : "../myWs/category/"
});

window.CategoryView = Backbone.View.extend({
    el : $('#category_details'),
    template : _.template($('#category-details').html()),
    initialize : function() {
        this.render();
    },
    render : function(eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});

var category = new Category({
    id : "067e6162-3b6f-4ae2-a171-240000000000"
});
var vategoryView = new CategoryView({
    model : category
});

category.fetch();

我在做的是：

创建骨干模型类别
创建骨干视图CategoryView
从其他Web服务获取数据，该服务返回JSON数据对象。在div“#category-details”中显示获取的数据。在浏览器上，我可以看到“fetch（）”方法有效，因为我可以看到我的JSON对象返回

这是HTML代码：

<div id="category_details">details:</div>

<script type="text/template" id="category-details">
<label>Id:</label>
<input id="id" name="id" type="text" disabled />

<label>Name:</label>
<input type="text" id="name" name="name" value="<%= name %>"/>
 </script>

问题是数据没有以html显示。如何在html中显示数据？

Answer 1

您的视图不处理模型上的更改，这意味着在model.fetch完成时不会重新呈现视图。

尝试从模型中绑定更改事件：

window.CategoryView = Backbone.View.extend({
    el : $('#category_details'),
    template : _.template($('#category-details').html()),
    initialize : function() {
        this.render();
        this.model.on('change', this.render, this);
    },
    render : function(eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});

演示http://jsfiddle.net/Hzm5Y/

请注意，Underscore不喜欢被要求呈现未定义的变量，您可能应该为模型添加默认值：

window.Category = Backbone.Model.extend({
    urlRoot : "../myWs/category/",
    defaults: {
        name: ''
    }
});

显示backbonejs模型的获取结果

1 个答案: