Javascript 带有handlebar.js的Backbone.js不具有渲染选项

我正在构建我的第一个Backbone.js应用程序，希望使用手柄插入我的数据。 我已经有了主干。视图渲染还可以，但是{{variables}}没有被我传入的数据替换

这是我的看法

OrderRow = Backbone.View.extend({

template: Handlebars.compile(
    '<div class="orderContainer">' +
        '<p class="row-top-container left">{{id}}</p>' +
        '<p class="row-top-container right">{{time_stamp}}</p>' + 
        '<p class="row-top-container right">{{queue_time}}</p><br />' +
        '<p class="items-contaier">{{items}}</p>' +
    '</div>'
),

initialize: function(){
    console.log("options used: " + this.options.sayHello );
    this.render();
},

render: function(){
    this.$el.html(this.template(this.options));
    return this;
}
});


    var data = {
        id:657543,
        name:"name"
    }

    var row = new OrderRow({ el: $('.row'), options:data });

OrderRow=Backbone.View.extend({
模板：handlebar.compile(
'' +
“
{{id}
”+
“
{{time\u stamp}
”+
“
{{queue\u time}

”+
“
{{items}
”+
''
),
初始化：函数（）{
log（“使用的选项：+this.options.sayHello”）；
这个。render（）；
},
render:function（）{
this.el.html（this.template（this.options））；
归还这个；
}
});
风险值数据={
身份证号码：657543，
姓名：“姓名”
}
var row=neworderrow（{el:$（'.row'），选项：data}）；

这是视图渲染后的DOM

有人知道我错过了什么吗？ 感谢您的帮助

---

谢谢

您有几个问题：

主干不再在视图中自动设置

。选项

，因此升级主干时代码将中断。您可以通过在

初始化
中自己执行此操作来解决此问题：

initialize: function(options) {
    this.options = options;
    //...
}

您有多个

.row

元素，因此说

el:$（'.row'）

会将视图绑定到所有元素（取决于主干版本），这可能会导致奇怪的事情发生。最好使用

上的

id

属性将一个视图绑定到每个

：

new OrderRow({ el: '#152293', ... });

你并没有按照你自己的想法来输入你的模板。您正在通过

选项

选项将数据传递给视图：

new OrderRow({ ..., options: data });

因此，

数据

将在视图中的

this.options.options

中结束，这意味着您想说：

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

或者在

initialize

中使用

this.options=options.options

，并在其他地方继续使用

this.options

演示：

---

不过，将

数据

包装在主干模型中可能更有意义。

谢谢您的澄清！我仍然在关注backbone.js。有一件事，我正在按照您的建议传递一个包含数据的模型，但我只从模型中获取“id”。我没有得到“时间戳”、“队列时间”或“项目”。为什么呢？再次感谢！一个模型将有一个把手将看到的

id

属性，其他属性将在其

属性

属性内。您通常会说

model.toJSON（）

来获取模板的数据。