【问题标题】:ember js development mode runtime template compile?ember js开发模式运行时模板编译?
【发布时间】:2014-07-01 10:07:42
【问题描述】:

我正在学习使用 Ember 和 Grunt 预编译的 HBS 模板,但还想在“开发人员模式”下运行,如果找不到 HBS,应用程序将在运行时编译它们。

我已经阅读了一些解决此问题的方法,并尝试使用 '$.ajax()' 和 'Ember.Handlebars.compile(data)' 来实现,其中返回的每个模板都将添加到 Ember 中。模板数组。这在文件系统上不起作用,因此我在将 Ember 应用添加到 webapps/ROOT 的 localhost Tomcat 上对其进行测试。

我正在使用我在网上找到的一个演示“用户管理员”应用程序,它使用了几个组件、帮助程序和“生成的控制器”。所以Templates编译OK了,但是Helper注册有问题,比如:

Handlebars 错误:在对象(生成的 modal-demo 控制器)上找不到属性“modal-box”。

...所以在将组件模板添加到模板数组后,我尝试按名称注册它:

if (templateName == 'components/modal-box') {
    Ember.Handlebars.helper('modal-box', function(value, options) {
        var escaped = Handlebars.Utils.escapeExpression(value);
        return new Handlebars.SafeString(tmpl);
    });
}

...但是我得到了这个新错误:

registerBoundHelper 生成的助手不支持与 Handlebars 块一起使用。 “模板是使用比当前运行时旧版本的 Handlebars 预编译的。”

这一切都在“应用程序创建就绪”函数中完成,该函数迭代模板名称列表,我想进一步开发它动态读取模板文件名称的位置。 Grunt 进程还压缩 CSS 并连接脚本,所以我也想为这些制定一个“开发者模式”进程。但现在我专注于 HBS 模板和组件。

我想这一定是一个常见问题解答,所以我想知道社区是否已经为这种用于开发的运行时编译找到了最佳实践?

如果没有,我该如何解决正确注册组件模板助手生成的控制器的问题?

【问题讨论】:

    标签: ember.js


    【解决方案1】:

    它们只需要在编译其他模板之前进行注册。

    Em.TEMPLATES["components/cow-dude"] = Ember.Handlebars.compile("I'm a cow");
    
    App = Ember.Application.create();
    

    http://emberjs.jsbin.com/apIRef/28/edit

    操作顺序很重要,如果它首先编译其他模板,它们只会假设cow-dude 是上下文中模型的属性(可能未定义)(http://emberjs.jsbin.com/apIRef/27/edit)。话虽如此,如果您要延迟加载组件/帮助程序,则需要在它们的任何依赖项之前加载它们(当您一次将它们全部放入时,Ember 会为您处理这一切)。

    另外,听起来您正在使用两个不同版本的 Handlebars,这就是为什么它给您Template was precompiled with an older version of Handlebars than the current runtime.

    我写了一个类似的回复给其他可能对你有用的人:Ember.js with external handlebars template

    【讨论】:

    • 好的,是的,我已经读到如果您动态编译模板,您需要在初始化 Ember 之前将它们加载到 DOM 中,但不知道该怎么做。我刚刚在“应用程序创建”之前添加了一些脚本来完成它,它现在可以工作了。关于 HBS 版本,该演示包含 HBS 1.0.0,但我知道 Ember 也包含 HBS,因此在使用 Ember 演示时遇到的各种版本问题也是我正在学习的内容。谢谢你让我直截了当。
    • 这一切都是在我发现你是如何执行 'grunt server' 并且应用程序在 node express 服务器上运行之前,所以不需要我自己的模板预编译过程。
    猜你喜欢
    • 2016-09-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-04-13
    • 1970-01-01
    • 1970-01-01
    • 2015-08-23
    相关资源
    最近更新 更多