19

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

他们将每个车把模板划分为带有.hbs扩展名的单独文件。

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

我的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但这没有帮助。

4

3 回答 3

23

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

1) 将它们加载到Ember.TEMPLATES： Ember 加载模板并将它们推入对象 Ember.TEMPLATES。它根据EmberJS 命名约定将模板内容与small name键一起存储。所以我们自己可以在编译之后推送模板。

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

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

所以现在您可以直接访问模板

   {{partial 'post'}}

在车把中或设置templateName为任何视图类。

App.OtherView = Ember.View.extend({
   templateName: 'post'
});

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

为了简化这一点，我们可以预编译所有模板并将它们保存为 JS（实际上将它们推送到 Ember.TEMPLATES 对象中）并加载该 JS。这可以使用插件ember-templates来实现，该插件也可作为 grunt 作业grunt-ember-templates 使用。

2）第二种方式是创建一个视图对象，并在AJAX请求后将编译后的代码设置为每个视图的模板。的文本插件requirejs可以帮助您做到这一点。

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

更新：有一些项目构建工具负责编译车把模板。Yeoman和Ember-Cli是您可以看一次的。

于 2013-09-02T06:51:37.007 回答
3

我用 Grunt 构建我的模板。它创建了一个我在 Ember 之后加载的 template.js 文件。这是我自己在 coffescript 上的 Grunt 配置：

module.exports = (grunt) ->
  tmpl_dir = 'app_src/templates'
  grunt.initConfig
    tmpl_dir: tmpl_dir
    ember_handlebars:
      options:
        processName: (path) ->
          re = new RegExp("^#{tmpl_dir}\/(.*)\.hbs$", 'i')
          r = path.match(re)
          path = r[1]
          path = path.replace /\_/g, '-'
          console.log '>', path
          path
      files:
        src: '<%= tmpl_dir %>/**/*.hbs'
        dest: 'public/js/templates.js'

  grunt.loadNpmTasks('grunt-ember-handlebars')
于 2013-09-03T08:21:51.327 回答
1

您要么需要使用构建过程来编译模板并连接应用程序逻辑，要么需要使用某种模块解析实现。

如果您在后端使用 Rails，请查看https://github.com/emberjs/ember-rails 如果没有，请查看https://github.com/stefanpenner/ember-app-kit和https:// /github.com/rpflorence/ember-tools

于 2013-09-02T08:09:20.317 回答