javascript 了解如何使用 require js 结合文本 js 在主干应用程序中加载 html 模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19523155/
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
Understanding how to use require js combined with text js to load html templates inside a backbone application
提问by Dany D
I am learning backbone js, trying to make a small project.
我正在学习backbone js，尝试做一个小项目。
In the of te page, I load require.js and text.js from the cloudflare CDN
在 te 页面中，我从 cloudflare CDN 加载 require.js 和 text.js
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.min.js">//</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.10/text.js">//</script>
I have made a backbone view called "Boxes":
我制作了一个名为“Boxes”的主干视图：
var Boxes = Backbone.View.extend({
// Choose an element.
el : '.content',
render : function () {
// Captur "this" -> the backbone view itself.
var that = this;
$(this.el).html('how do I load a html template here?');
}
});
Problems:
问题：
When I add the text.js plugin to the page, I get the following error:
Mismatched anonymous define() module: function (module) { 'use strict'; ......
当我将 text.js 插件添加到页面时，出现以下错误：
不匹配的匿名定义（）模块：函数（模块）{'使用严格'；......
So I can't have the require.js and the text.js both loaded, it gives me the above error even on a blank page without any other scripts on it.
所以我不能同时加载 require.js 和 text.js，即使在没有任何其他脚本的空白页面上，它也会给我上述错误。
- After I make the require js work with text js, how do I load an html template for that view?
- 在我使 require js 与文本 js 一起工作后，如何为该视图加载 html 模板？
Right now I know how to do it when I write my templates inline, in the index.html page.
现在，当我在 index.html 页面中编写内联模板时，我知道该怎么做。
I do it like this:
我这样做：
var Boxes = Backbone.View.extend({
el : '.content',
render : function () {
var that = this; // This backbone view
var template = _.template($('#user-list-template').html(), {});
that.$el.html(template);
}
});
Thank you!
谢谢！
回答by Ming Chan
In your HTML file, you only need to load requrejs like as shown in this index.html
在您的 HTML 文件中，您只需要像index.html 中所示那样加载 requrejs
<script type="text/javascript" data-main="js/main" src="js/libs/require-2.1.2.min.js"></script>
In above, "data-main" tells requirejs where to load its bootstrap file and in this case, it is under "js/main.js"
在上面，“data-main”告诉 requirejs 在哪里加载它的引导文件，在这种情况下，它在“js/main.js”下
You can find the file in here.
您可以在此处找到该文件。
In the main.js file, you will need to specify
在 main.js 文件中，您需要指定
require.config({ ... });
to configure requirejs.
配置requirejs。
After that you can use "define()/require()" to load the templates like...
之后，您可以使用“define()/require()”来加载模板，例如...
define(['text!../../templates/app/content.about.html'],...);
See here for a complete example.
回答by Simon Boudrias
When you use require.js, you only use one script tag in your page. Everything else is loaded by Require.js.
当你使用 require.js 时，你只在你的页面中使用了一个 script 标签。其他一切都由 Require.js 加载。
To use a plugin, you'll configure it in a require.config
要使用插件，您需要在 require.config
require.config({
paths: {
text: "path/to/text"
}
});
Then in your modules, you simply call it:
然后在您的模块中，您只需调用它：
define([
"text!path/to/tpl"
], function( tplString ) {
});
Note though, that if you're managing templates, the best would be to load the template pre-compiled. Text plugin only return a string, this is not very good for optimisation and force you to repeat the template compilation logic. You should use a template loader plugin, for underscore/lodash micro-template, I recommend you this one: https://github.com/tbranyen/lodash-template-loader
但请注意，如果您正在管理模板，最好加载预编译的模板。文本插件只返回一个字符串，这对于优化来说不是很好，并迫使您重复模板编译逻辑。你应该使用模板加载器插件，对于underscore/lodash micro-template，我推荐你这个：https: //github.com/tbranyen/lodash-template-loader
If you want an example of an app using Require.js and Backbone, you should really check Backbone-Boilerplate: https://github.com/backbone-boilerplate/backbone-boilerplate
如果你想要一个使用 Require.js 和 Backbone 的应用程序示例，你应该检查 Backbone-Boilerplate：https: //github.com/backbone-boilerplate/backbone-boilerplate
Backbone-Boilerplate is good way to setup your project fast using the best practices around Backbone development. Plus it use AMD extensively, so you'll have a working setting if it is your first time around.
Backbone-Boilerplate 是使用 Backbone 开发的最佳实践快速设置项目的好方法。此外，它广泛使用 AMD，因此如果这是您第一次使用，您将拥有一个工作设置。
