1

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

这是我的backbone.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();

我正在做的是：

  1. 创建骨干模型类别
  2. 创建主干视图 CategoryView
  3. 从返回 JSON 数据对象的 REST Web 服务获取数据。在 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 中显示数据？

4

1 回答 1

2

您的视图不处理模型上的更改，这意味着视图在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: ''
    }
});
于 2012-12-09T11:59:08.713 回答