Question

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

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

所以我只是复制了所有代码并创建了具有相同名称的文件。当我跑它们时，什么都没有。我正在尝试ROUTING示例。

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

Answer 1

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

1）将其加载到Ember.TEMPLATES： Ember加载模板并将其推送到对象Ember.TEMPLATES。它根据EmberJS Naming conventions使用small name密钥存储模板内容。所以我们自己可以在编译后推送模板。

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

// "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-ember-templates。

2）第二种方法是创建一个视图对象，并在AJAX请求之后将编译后的代码设置为每个视图的模板。 requirejs的文本插件可帮助您完成此操作。

如今，Ember人建议不要创建视图对象，除非有必要，我建议你按照第一种方式。预编译的选项是最佳选择，每次创建模板时都会减少大量工作。

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

Answer 2

我使用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')

Answer 3

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

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

将hbs模板作为单独的文件

3 个答案: