Backbone.js 不使用主干线和下划线渲染的单独模板文件_Backbone.js

Backbone.js 不使用主干线和下划线渲染的单独模板文件

backbone.js

Backbone.js 不使用主干线和下划线渲染的单独模板文件,backbone.js,Backbone.js,利用 <script type="text/template" id="templateid">  </script> 代码运行良好但是如果我把模板作为一个外部文件 <script type="text/template" id="templateid" src="template.js"></script> 这行不通以上两种方法的区别是什么？我如何回

利用

<script type="text/template" id="templateid">
<!-- Template content goes here -->
</script>

代码运行良好

但是如果我把模板作为一个外部文件

<script type="text/template" id="templateid" src="template.js"></script>

这行不通

以上两种方法的区别是什么？我如何回避这个问题？或者我在这里遗漏了一些可能很明显的东西吗？

如果您只是简单地尝试使用各种示例中的

$（“#templateid”）.html（）之类的东西来获取模板文本，那么只有当文本真正内联在
标记中时，这才有效
通常，使用
标记无法获取远程文件的内容
如果要加载外部模板，则必须使用代码显式获取内容（例如，使用JQuery的$.get（）
或带有文本插件的require.js）
下面是有关如何在主干上下文中获取外部模板的更多详细信息：

-纯主干+JQuery
-使用require.js及其文本插件

但是，请小心-过度使用此解决方案将导致大量额外的获取模板请求，从而导致应用程序运行缓慢。一般来说，以通常的方式嵌入模板（内联在
标记中）对性能更好。
尽管我接受了另一个答案，但我还是继续以几种不同的方式实现了这个特定的要求。我发布了我发现的最好、最简单的方法，我认为这对那些不想使用木偶之类的模板引擎的人很有用
使用主干线和下划线：
文件夹结构
文件夹结构可以如下所示：
Root:
├───css
├───js
│   ├───router.js
│   ├───model.js
│   ├───view.js
│   └───config.js   
├───templates
│   ├───home.html
│   ├───login.html
│   └───register.html   
└───images
└───index.html

<html>
<head>
<!--Relevant CSS files-->
</head>
<body>
<div class="template_body">
    <div class="header">  
         <!--HTML content for header-->
    </div>
    <div class="content" id="template">
          <!--This would be where the dynamic content will be loaded-->
    </div>
    <div class="footer">
         <!--HTML content for footer-->
    </div>
</div>
<!--Include relevant JS Files-->
</body>
</html> 

var LoginView = Backbone.View.extend({
    el: "#template",//Container div inside which we would be dynamically loading the templates
    initialize: function () {
        console.log('Login View Initialized');
    },
    render: function () {
        var that = this;
        //Fetching the template contents
        $.get('templates/login.html', function (data) {
            template = _.template(data, {});//Option to pass any dynamic values to template
            that.$el.html(template);//adding the template content to the main template.
        }, 'html');
    }
});

var loginView = new LoginView();


基本模板
您需要有一个基本模板（index.html），在其中您将呈现不同的模板。这将确保在每次呈现新页面时，不会加载常见的html内容，如听者、页脚、导航菜单等，从而大幅提高页面加载速度
示例结构可以如下所示：
Root:
├───css
├───js
│   ├───router.js
│   ├───model.js
│   ├───view.js
│   └───config.js   
├───templates
│   ├───home.html
│   ├───login.html
│   └───register.html   
└───images
└───index.html

<html>
<head>
<!--Relevant CSS files-->
</head>
<body>
<div class="template_body">
    <div class="header">  
         <!--HTML content for header-->
    </div>
    <div class="content" id="template">
          <!--This would be where the dynamic content will be loaded-->
    </div>
    <div class="footer">
         <!--HTML content for footer-->
    </div>
</div>
<!--Include relevant JS Files-->
</body>
</html> 

var LoginView = Backbone.View.extend({
    el: "#template",//Container div inside which we would be dynamically loading the templates
    initialize: function () {
        console.log('Login View Initialized');
    },
    render: function () {
        var that = this;
        //Fetching the template contents
        $.get('templates/login.html', function (data) {
            template = _.template(data, {});//Option to pass any dynamic values to template
            that.$el.html(template);//adding the template content to the main template.
        }, 'html');
    }
});

var loginView = new LoginView();

请注意，el
标记非常重要
要将值传递给视图，只需按如下方式传递：
var data_to_passed = "Hello";
$.get('templates/login.html', function (data) {
    template = _.template(data, { data_to_passed : data_to_passed }); //Option to pass any dynamic values to template
    that.$el.html(template); //adding the template content to the main template.
}, 'html');

在模板中：
<%=data_to_passed;%>//Results in "Hello"

//结果是“你好”

可以传递数组、对象甚至变量
希望这有帮助。干杯你说的“不行”是什么意思？当您尝试它时会发生什么，这与您期望的有什么不同？您好Guffa，当我将脚本内容分离到一个文件并使用src=“url\u to\u file.js”调用时，模板将不会被呈现。但是如果我在同一页中复制粘贴脚本标记内的内容，模板将呈现所有值。我认为您在上一个代码块中遗漏了一个%。它应该是