javascript - Backbone.js 模板不从模型继承属性

Question

我正在尝试使用 Backbone 获得一个简单的 SPA 用于测试目的。当我渲染 View 时，我的 Underscore 模板不会从模型继承任何属性。我假设我犯了一个简单的错误，但在摆弄了一个多小时后，我在这里寻求一些指导。如果有帮助，我正在使用 ASP.NET Web API 2、jQuery 2.x+ 以及最新版本的 Backbone 和 Underscore。

我的模板:

<script type="text/template" id="equipmentTemplate">
    <td><%= ID %></td>
    <td><%= Name %></td>
    <td><%= Quantity %></td>
    <td><%= Description %></td>
</script>

我的代码:

// Single item model
var EquipmentModel = Backbone.Model.extend({
    urlRoot: '/api/equipment',
    defaults: {
        ID: '',
        Name: '',
        Quantity: '',
        Description: ''
    },
});

// Collection of our single item models
var EquipmentList = Backbone.Collection.extend({
    model: EquipmentModel,
    url: '/api/equipment'
});

// GET single instance of model
var equipmentModel = new EquipmentModel({ id: 1 });
equipmentModel.fetch();

// GET entire collection
var equipmentList = new EquipmentList();
equipmentList.fetch();

// Create single model view
EquipmentView = Backbone.View.extend({
    tagName: "tr",
    template: _.template($("#equipmentTemplate").html()),
    render: function () {
        this.$el.html(this.template(this.model.attributes));
    }
});
var equipmentView = new EquipmentView({ model: equipmentModel });
equipmentView.render();

运行时 console.log(equipment.fetch())被调用时，服务器返回以下内容:

Object {readyState: 1, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
abort: function ( statusText ) {
always: function () {
complete: function () {
done: function () {
error: function () {
fail: function () {
getAllResponseHeaders: function () {
getResponseHeader: function ( key ) {
overrideMimeType: function ( type ) {
pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
progress: function () {
promise: function ( obj ) {
readyState: 4
responseJSON: Object
responseText: "{"ID":1,"Name":"A random part","Quantity":2,"Description":"foo bar approved."}"
setRequestHeader: function ( name, value ) {
state: function () {
status: 200
statusCode: function ( map ) {
statusText: "OK"
success: function () {
then: function ( /* fnDone, fnFail, fnProgress */ ) {
__proto__: Object

但是，当我返回 View 的 el 时，我看到:

equipmentView.$el.html()
"
    <td></td>
    <td></td>
    <td></td>
    <td></td>
"

另外，要注意的是，我尝试在 View 中包含实际模型，但项目不会呈现。我也尝试过使用 this.model.toJSON() 。我尝试过的一个例子是:

EquipmentView = Backbone.View.extend({
    tagName: "tr",
    template: _.template($("#equipmentTemplate").html()),
    render: function () {
        this.$el.html('<td>'+ this.model.get('Name') + '</td>');
    }
});

然而，这只会产生一个空的 <td></td> ...这似乎不对。

更新:明白了，谢谢 gerl。

我需要获取 View 内的模型:

// Create single model view
EquipmentView = Backbone.View.extend({
    initialize: function () {
        this.model.fetch();
    },
    tagName: "tr",
    template: _.template($("#equipmentTemplate").html()),
    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
    }
});
var equipmentView = new EquipmentView({ model: equipmentModel });
equipmentView.render();

这很有效。

Answer 1

在模型或集合中添加 fetch 调用(以来自 json 的调用为准)。

类似于:

var EquipmentList = Backbone.Collection.extend({
    model: EquipmentModel,
    url: '/api/equipment',
    initialize: function() { 
      this.fetch(); 
    }
});