Question

您好我想使用Backbone和eclipse环境创建一个简单的页面。我想单独创建所有文件。像html文件单独和模板（hogan）文件单独和骨干文件分开..当我这样做它的页面不渲染..

我在不同的文件夹中单独创建了所有文件。我想在我的主干页面中调用模板并将其呈现到html页面..

我的htmlpage是

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" content-type:application/javascript>
<title>Welcome</title>
</head>
<body>
<h1>Welcome</h1>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
    <script type="text/template" src = "js/templ" id ="search_template" ></script>
    <script src = "js/1.js"></script>
    <div id = "search_container"></div>
</body>
</html>

我的Backbone页面是

/**
 * New node file
 */
    SearchView = Backbone.View.extend({
        initialize: function(){
        this.render();
        },
    render: function(){
        // Compile the template using underscore
            var template = _.template( $("#search_template").html(), {}
        );
        // Load the compiled HTML into the Backbone "el"
            this.$el.html( template );
    }
});
    var search_view = new SearchView({ el: $("#search_container") });

我的模板页面是

<script type="text/html" id="search_template">
<label>Search</label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>

Answer 1

您不能像脚本那样包含模板。因此，您的模板页面永远不会包含在html页面和$（“＃search_template”）中.html（）永远不会找到要使用的模板。

这是因为使用是一种黑客攻击。页面渲染器无法识别type =“text / html”并默默忽略它。同时，元素在DOM中可见，因此可以使用选择器进行访问。

如果您想将javascript模板存储在单独的文件中，您有以下几种选择：

在您使用的任何服务器端语言中使用模板（例如在带有Jinja的Flask中，这将类似于：

{% include "js/templ.html" %}

执行异步GET（使用jQuery f.ex获取模板
将require.js与文本扩展名

使用eclipse的主干的简单页面

1 个答案: