gpt4 book ai didi

ember.js - ember hbs 模板作为单独的文件

转载 作者:行者123 更新时间:2023-12-03 12:42:28 25 4
gpt4 key购买 nike

我想运行他们第一页上提供的 ember.js(版本 1.0.0 Final)示例。

他们用 .hbs 将每个 Handlebars 模板分成单独的文件。延期。

所以我只是复制了所有代码并创建了具有相同名称的文件。当我运行它们时,什么也没有发生。我正在尝试路由示例。

我的 index.html :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body>

<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember-1.0.0.js"></script>
<script src="js/libs/bootstrap.js"></script>
<script src="js/app.js"></script>
</body>
</html>

我的模板位于根目录中,我将它们复制到 /templates但这没有帮助。

最佳答案

当您在不同文件中有模板时,您必须加载它们并编译它们,因为 EmberJS 不检测文件。有几种方法可以做到这一点。

1) 将它们加载到 Ember.TEMPLATES :
Ember 加载模板并将它们推送到 Ember.TEMPLATES 对象中。它使用 small name 存储模板内容根据 EmberJS Naming conventions 的 key .所以我们自己可以在编译之后推送模板。

例如:如果您有一个名为“post”的模板,请加载 post.hbs通过 AJAX 请求文件然后设置,

// "data" is html content returned from Ajax request
Ember.TEMPLATES['post'] = Ember.Handlebars.compile(data)

所以现在您可以直接访问模板
   {{partial 'post'}} 

在 Handlebars 中 设为 templateName对于任何 View 类。
App.OtherView = Ember.View.extend({
templateName: 'post'
});

因此,您可能最终必须通过 AJAX 请求加载所有 HBS 文件并在加载应用程序之前对其进行编译。这对应用程序来说是一个很大的开销。

为了缓解这种情况,我们可以预编译所有模板并将它们保存为 JS(实际上将它们推送到 Ember.TEMPLATES 对象中)并加载该 JS。这可以使用插件 ember-templates 来实现这也可以作为一项繁重的工作 grunt-ember-templates .

2) 第二种方式是创建一个 View 对象,并在AJAX请求后将编译后的代码设置为每个 View 的模板。 requirejs的文字插件帮助您做到这一点。

由于现在 Ember 人们建议除非需要,否则不要创建 View 对象,我建议您遵循第一种方式。预编译是最好的选择,每次创建模板时可以减少大量工作。

更新 :有一些项目构建工具负责编译 Handlebars 模板。 YeomanEmber-Cli是你可以看一次的。

关于ember.js - ember hbs 模板作为单独的文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18566795/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com