Javascript 在主干中呈现简单的按钮视图&；车把

对脊梁骨来说是全新的，现在我的脊椎在做一些事情时会变得僵硬

我用车把作为我的模板引擎

我想做的是在我的页面上呈现一个简单的按钮。为此，在我的模板中，我有：

<script id="newButton"  type="text/x-handlebars">

</script>

最后，我做到了

var btnView = new SimpleButtonView();

---

它不会呈现任何东西。我在这里做错了什么：）？此外，我的在线评论的问题也非常感谢，因为我相当迷茫

我大致会这样做：

var SimpleButtonView = Backbone.View.extend({
        tagName: 'button', // how can I define other attribute properties such as Text for button?
        template: $('#newButton').html(),
        initialize: function(){ this.render(); },
        render: function(){
              var tmpl = Handlebars.compile(this.template); // what does compile do
              this.$el.html(tmpl());// why is this a function?          
              return this;   
        }
});

HTML:

小提琴：

说明：

var template = Handlebars.compile(this.$template.html());

这告诉Handlebar从该模板编译html。这意味着Handlebar在内部准备了一个带有html的javascript函数。这个模板变量是可重用的，因为您可以向它传递不同的上下文，它将根据您传递的上下文（数据）输出html

这就是为什么我把它放在初始化例程中的原因-它只需要发生一次-您可以随后使用不同的

buttonText

调用render 100次，这样会更快，因为它已经准备好了模板

this.$el.html(this.template(this.getContext()));

如您所见，我已经将数据传递到模板的过程抽象为一个名为

getContext

的方法。getContext所做的只是返回一个键值对象，该键值可以在模板中使用

this.$el.html(this.template(this.getContext()));

以下是重要的一点：

我将其抽象出来，因为在理想的设置中，您将拥有自己的视图扩展，该扩展可以完成常见的有用内容。在该扩展中，您将处理渲染等操作，并将

getContext

函数放在那里。应用程序中的所有视图都将扩展到该视图之外，而不是直接从主干视图扩展，因此对于每个视图，您只需执行最简单的操作，即提供一个

$template

，并创建一个

序列化

方法，如果您想将任何特殊内容传递给模板

this.$el.html(this.template(this.getContext()));

---

注意，一些html必须进入模板标记中-模板标记本身不是元素，因此一些html必须在模板标记中才能工作。

页面加载后代码是否执行？您正在使用jQuery吗？