Ember 应用程序中的外部车把模板答案

【问题标题】：External Handlebars template in Ember AppEmber 应用程序中的外部车把模板
【发布时间】：2013-03-20 19:50:17
【问题描述】：

我有以下代码

    Todos = Ember.Application.create();

    Todos.Todo = Ember.Object.extend({
        title: null,
        isDone: false
    });

    Todos.TodosController = Ember.Object.extend({
        // We need an array to hold our Todo objects
        todos: Ember.A(),

        init: function(){
            debugger;
            var items = this.get('todos');
            items.addObject(Todos.Todo.create({title: "This is an Ember Item"}));
            items.addObject(Todos.Todo.create({title: "This is another Ember Item"}));
        },

        remainingCount: function(){
            return this.get('todos').filterProperty('isDone', false).length;
        }.property('todos.@each.isDone')

    });

    Todos.controller = Todos.TodosController.create();

    Todos.TodoView = Ember.View.extend({
        templateName: 'todos'
    });

</script>

我在 thml 中定义了以下车把挂钩。但由于某种原因，模板没有被渲染。当我检查Handlebars.templates 时，我看到返回的对象中列出了待办事项。我在这里错过了什么。

编辑

是否可以在 .handlebars 文件中定义模板？

编辑

我在 app.js 中做了这个。

$.extend(Ember.TEMPLATES, Ember.TEMPLATES, Ember.Handlebars.templates);

但这似乎也没有帮助。如下图所示，模板现在列在Ember.TEMPLATES 中。但由于某种原因，它没有接他们。

另外，我在正文标签之间没有任何 html。我不确定那里是否应该有任何东西。

<body></body>

【问题讨论】：

你的待办事项模板是在哪里定义的？你是在外部定义的？你用什么编译的？
我在一个名为 todos.handlebars 的文件中使用外部模板。我将它们编译为构建过程的一部分。因此下载了一个名为 templates-compiled.js 的文件。
这里发生了一些事情：您正在手动创建控制器的实例并且您没有正确使用命名约定：控制器应该是 TodosController 扩展 Ember.ArrayController 而不是Ember.Object 因此您不必定义 todos 属性，只需使用 content 代替。这也带来了控制器中的其他几个功能。另请注意，在 Ember 中使用 Handlebars 与其他框架略有不同。您应该通过Ember.Handlebars.compile('your template') 将您编译的模板存储在Ember.TEMPLATES 集合中
您确定在您的应用程序开始使用模板之前已在客户端中加载了预编译的模板文件？你应该有一个名为application 的模板，这是你的布局。
正如我之前所说，您需要一个名为application 的模板。您将按照应用程序的正确路径加载 TodosView 调用 {{view}} 助手或 {{outlet}} 助手，但需要有一个 application 模板。我强烈建议您阅读guides。

标签： ember.js handlebars.js

【解决方案1】：

已经回复here

要预编译车把模板，您必须安装 ember-precompile package

如果您需要 make 实用程序（在 Mac 上）install it

然后将预编译的模板包含到您的 index.html 中，如下所示：

    <script type="text/javascript">
        App = Ember.Application.create({});
    </script>
    <!-- templates -->
    <script src="js/templates/templates.js"></script>
    <!-- app init -->
    <script type="text/javascript">
        App.initialize();
    </script>

【讨论】：

【解决方案2】：

@MilkyWayJoe

您所说的关于应用程序模板的内容对我有帮助，谢谢。我认为我的预编译器是导致我出现问题的原因。我现在可以在应用程序模板中查看我的部分内容。但是，linkTo 似乎由于某种原因不起作用。如果我在 html 页面中声明模板，linkTo 有效！！

这是上下文中的预编译器。 http://blog.selvakn.in/2012/05/precompiling-handlerbars-tempates-with.html

我现在可以查看文件了。但是，您需要将以下行添加到 app.js 以使其正常工作。

// To register partials
$.each(Ember.Handlebars.templates, function(i, template){
    if(i.indexOf('_') === 0){
        Ember.Handlebars.partials[i.substring(1, i.length)]  = template;
    }
});

// To let Ember.Handlebars know about the newly added templates
$.extend(Ember.TEMPLATES, Ember.TEMPLATES, Ember.Handlebars.templates);

帮助我的是先将模板一次一个地添加到 html 正文中，然后将它们移动到自己的文件中。另请记住，data-template-name 不是您可以忽略的属性。如果这样做会导致各种问题。

编辑

这个节点包效果更好。

Emberjs Handlebars precompiling

【讨论】：