Question

我开始使用backbone.js，我想用我的模型属性构建一个只包含html按钮的模板。所以我在html页面中定义了一个模板，如下所示：

<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'/>
<title>Backbone test 5</title>
    <script src="underscore.js"></script>
    <script src="jquery.js"></script>
    <script src="backbone.js"></script>
    <script src="backbone_test5.js"></script>
</head>

<body>
<div id="here"></div>

<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>

</body>

</html>

我想在我的视图中构建我的模板：

var Bouton_View= Backbone.View.extend({

    view_template: _.template( $('#button_template').html() ),

    events:{
    'click':'onClick'
    },

    initialize: function(){
    this.$el=('#here');
    },

    render: function(){
    this.$el.html(this.view_template(this.model.attributes));
    return this;
    },

    onClick: function(){
    var increment=0;
    increment=this.Model.get("number_of_click")+1;
    this.Model.set({"text":increment});
    this.Model.set({"number_of_click":increment});
    this.render();

    }

});

但是当我在浏览器中运行该页面时，会出现此错误消息：

error message in underscore.js screenshot

我很确定js file没有错，因为我已尝试使用另一个html文件并且它有效。那我的模板有什么问题？提前谢谢

Answer 1

为什么会这样？

Spoiler ：在这种情况下，下划线模板引擎很好。

这个例子的问题是描述你的Bouton_View的代码，可能就在这里：

<script src="backbone_test5.js"></script>

在DOM解析器到达

之前执行

<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>

元素。这可以描述为

加载backbone_test5.js文件并执行其内容
执行_.template( $('#button_template').html() )
- 使用id="button_template"
- 没有找到
- 对不存在的.html()元素=＆gt;执行$函数这导致null
- 执行_.template(null) =＆gt;这会给你提到的错误

如何解决？

有几种方法可以做到这一点。

仅限HTML。重新排序代码，以便在查询时存在DOM元素：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Backbone test 5</title>
    </head>
    <body>
        <div id="here"></div>

        <script type="text/template" id ="button_template">
        <button type="button" id="my_button"><%= text %></button>
        </script>

        <script src="underscore.js"></script>
        <script src="jquery.js"></script>
        <script src="backbone.js"></script>
        <script src="backbone_test5.js"></script>
    </body>
</html>

使用一些js-code。您可以使用backbone_test5.js包装$(...)文件的内容，以便只在DOM内容准备就绪后执行：

$(function () {
    var Bouton_View = Backbone.View.extend({ /* ... */ });
});

下划线方法_.template（）不编译我的模板

1 个答案:

为什么会这样？

如何解决？