javascript 如何使用 Backbone.js 在 html 页面中创建和显示外部模板？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19905406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to create and display external template in html page using Backbone.js?
提问by sachin_ware
I am very new to backbone.js ,I am practicing to display templates in my 'index.html' page. I have created a template in In 'index.html' and displaying it in a using view.It works fine with single html file i.e. everything is kept in 'index.html'.But now i want those templates to store in other file and display in my 'index.html'. I tried to find some solution ,but all were confusing. SO please, can anyone tell me how should i do it.
我对backbone.js 很陌生，我正在练习在我的“index.html”页面中显示模板。我在“index.html”中创建了一个模板并在使用视图中显示它。它适用于单个 html 文件，即所有内容都保存在“index.html”中。但现在我希望这些模板存储在其他文件中，并且显示在我的“index.html”中。我试图找到一些解决方案，但都令人困惑。所以请，谁能告诉我我该怎么做。
Following is my template to be display(currently in a 'index.html'):
以下是我要显示的模板（当前在“index.html”中）：
<script type="text/template" id="cloudtag_tempalte">
<center>
<ul class="cld" ">
<li > <a class="tag1" id="t1" href="https://www.google.com" target="_blank"></a> </li>
<li > <a class="tag2" id="t2" href="#">sachin </a> </li>
<li > <a class="tag3" id="t3" href="#">Ramesh </a> </li>
<li > <a class="tag1"id="t33" href="#">Tendulkar</a></li>
<li > <a class="tag5"id="t34" href="#">Cricket</a></li>
<li > <a class="tag2"id="t35" href="#">Test</a></li>
</ul><!--/cld-->
</center>
</script>
Following is a div in which it is displayed(in same 'index.html'):
以下是显示它的 div（在同一个“index.html”中）：
<div class="tags" id="myTags"> </div><!--/tags-->
and following is script of view(in same file 'index.html'):
以下是视图脚本（在同一个文件“index.html”中）：
<script type="text/javascript">
var cld_view=Backbone.View.extend({
initialize: function(){
},
render: function(){
// Compile the template using underscore
var template = _.template( $("#cloudtag_tempalte").html(), {} );
// Load the compiled HTML into the Backbone "el"
this.$el.html( template );
}
});
var cloudtag=new cld_view({el:$("#myTags")});
cloudtag.render();
</script>
So please, suggest me changes to be made to make this template external . Thanx in advence . . .
因此，请建议我进行更改以使此模板成为外部 . 谢谢提前。. .
回答by Roy M J
Simplest way would be to use underscore.jswhich is suggested by backbone.js itself. If you want to go one step higher, then you could go for templating engines like :
最简单的方法是使用underscore.js由backbone.js 本身建议的方法。如果您想更上一层楼，那么您可以使用模板引擎，例如：
and so many others..
还有很多其他人..
Personally i prefer Underscore.js. An example would be as follows :
我个人更喜欢Underscore.js。一个例子如下：
Using underscore :
使用下划线：
$.get('templates/your-template-file.html', function (data) {
template = _.template(data, {
data: data_you_want_to_pass_to_template
});
this.$el.html(template);
}, 'html');
As for extending this to your code :
至于将其扩展到您的代码：
var cld_view=Backbone.View.extend({
el:'template_div',
initialize: function(){
},
render: function(){
// Compile the external template file using underscore
$.get(App.baseUrl + 'templates/your-template-file.html', function (data) {
template = _.template(data, { });
this.$el.html(template);
}, 'html');
}
});
App.baseUrl- My full path of the project root which is set as config. You can either resuse this or remove this. But just make sure, you point to the exact template folder.
App.baseUrl- 我设置为配置的项目根目录的完整路径。您可以重新使用它或删除它。但请确保您指向确切的模板文件夹。
You need to specify your eltag, else you would need to hard-code the div you are focusing to render the template.
您需要指定您的el标签，否则您需要对您关注的 div 进行硬编码以呈现模板。
Cheers
干杯
回答by jax
I attach my compiled templates to the object itself. You can append extra templates to the main template
我将编译后的模板附加到对象本身。您可以将额外的模板附加到主模板
<script type="text/javascript">
var cld_view=Backbone.View.extend({
//compiled templates
template : _.template($("#cloudtag_tempalte").html()),
template2 : _.template($("#another_template").html()),
initialize: function(){
},
render: function(){
// Load the compiled HTML into the Backbone "el"
this.$el.html( this.template);
//add other templates to the main one.
this.$el.find('someSelector').append(template2 );
}
});
var cloudtag=new cld_view({el:$("#myTags")});
cloudtag.render();
</script>
回答by sachin_ware
.Finaly i found the solution to my problem after struggling 2 days to create and display external templates in my 'index.html' page using backbone.js.
.最后，我在使用backbone.js 在我的'index.html' 页面中努力创建和显示外部模板2 天后找到了解决我的问题的方法。
For that i used underscore js. Here is the process that i followed to successfully run my application:
为此，我使用了下划线 js。这是我成功运行我的应用程序所遵循的过程：
i followed the tutorial mentioned in this video.
我遵循了本视频中提到的教程。
I created a separate template file called 'CloudTagTemplate.html' and pasted the html code mentioned in the above question in this file and saved in Templates folder where i am going to store other templates later on:
我创建了一个名为“CloudTagTemplate.html”的单独模板文件，并将上述问题中提到的 html 代码粘贴到此文件中，并保存在 Templates 文件夹中，稍后我将在其中存储其他模板：
my CloudTagTemplate.html:
我的 CloudTagTemplate.html：
<center>
<ul class="cld" ">
<li > <a class="tag1" id="t1" href="https://www.google.com" target="_blank"></a> </li>
<li > <a class="tag2" id="t2" href="#"></a> </li>
<li > <a class="tag3" id="t3" href="#"></a> </li>
<li > <a class="tag2" id="t4" href="#"></a> </li>
<li > <a class="tag4" id="t5" href="#"></a> </li>
<li > <a class="tag1" id="t6" href="#"></a> </li>
<li > <a class="tag1" id="t7" href="#"></a> </li>
<li > <a class="tag5"id="t8" href="#"></a> </li>
<li > <a class="tag2"id="t9" href="#"></a></li>
<li > <a class="tag1"id="t10" href="#"></a></li>
<li > <a class="tag3"id="t11" href="#"></a></li>
<li > <a class="tag4"id="t12" href="#"> </a></li>
<li > <a class="tag1"id="t13" href="#"></a></li>
<li > <a class="tag5"id="t14" href="#"></a></li>
<li > <a class="tag1"id="t15" href="#"></a></li>
<li > <a class="tag2"id="t16" href="#"></a></li>
<li > <a class="tag1"id="t17" href="https://www.google.com"></a></li>
<li > <a class="tag2" id="t18" href="#"></a></li>
<li > <a class="tag3"id="t19" href="#"></a></li>
<li > <a class="tag2"id="t20" href="#"></a></li>
<li > <a class="tag4"id="t21" href="#"></a></li>
<li > <a class="tag1"id="t22" href="#"></a></li>
<li > <a class="tag1"id="t23" href="#"></a></li>
<li > <a class="tag5"id="t24" href="#"></a></li>
<li > <a class="tag2"id="t25" href="#"></a></li>
<li > <a class="tag1"id="t26" href="#"></a></li>
<li > <a class="tag5"id="t27" href="#"></a></li>
<li > <a class="tag3"id="t28" href="#"> </a></li>
<li > <a class="tag1"id="t29" href="#"></a></li>
<li > <a class="tag3"id="t30" href="#"></a></li>
<li > <a class="tag1"id="t31" href="#"></a></li>
<li > <a class="tag4"id="t32" href="#"></a></li>
<li > <a class="tag1"id="t33" href="#"></a></li>
<li > <a class="tag5"id="t34" href="#"></a></li>
<li > <a class="tag2"id="t35" href="#"></a></li>
</ul><!--/cld-->
</center>
Then i created a CloudTagView.js in View Folder:
然后我在视图文件夹中创建了一个 CloudTagView.js：
my CloudTagView.js:
我的 CloudTagView.js：
var cld_view=Backbone.View.extend({
el:'#myTags',
initialize: function(){
},
render: function(){
var that=this;
$.get( '/multipage/Backbone/Templates/CloudTagTemplate.html', function (data) {
template = _.template(data, { });
that.$el.html(template);
}, 'html');
}
});
var cloudtag=new cld_view();
cloudtag.render();
note that -
注意 -
var that=this;
is important to put over there ,since we are defining anonymous function $.get()
放在那里很重要，因为我们正在定义匿名函数 $.get()
and at last i linked all these required files in my 'index.html' as:
最后，我将“index.html”中的所有这些必需文件链接为：
<script src="Backbone/Views/CloudTagView.js"></script>
<script src="Backbone/Views/LoginModalView.js"></script>
and finally it worked fine as i wanted. . Thanx to @Roy M J
最后它像我想要的那样工作正常。. 感谢@Roy MJ
