gpt4 book ai didi

ember.js - 结合使用grunt Handlebars 和 Ember ,将模板拆分为单独的文件

转载 作者:行者123 更新时间:2023-12-04 13:40:48 24 4
gpt4 key购买 nike

我试图将我的ember.js Handlebars 模板分成几个文件,以使代码库更易于管理。

由于我们使用的是yeeoman/grunt,因此我遇到了this handlebars plugin。我已将其配置如下:

    handlebars: {
compile: {
options: {
namespace: 'JST'
},
files: {
'<%= yeoman.dist %>/scripts/templates.js': [
'<%= yeoman.app %>/templates/*.hbs'
],
}
}
}

如插件的“用法示例”部分中所建议。这按预期方式工作,生成了 dist/scripts/templates.js文件。但是,将模板放在“JST”命名空间中会使Ember无法再访问它们。这是我得到的错误:
Uncaught Error: assertion failed: You specified the templateName application for <App.ApplicationView:ember312>, but it did not exist.

一些问题:
  • 我如何“初始化”现在在templates.js中的 Handlebars 模板,以便Ember可以找到它们?
  • 由于模板现在不在文档正文中,我如何告诉ember模板在DOM中的放置位置?

  • 这是我的index.html:
    <!DOCTYPE html>
    <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title></title>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width"/>

    <!-- build:css styles/main.css -->
    <link rel="stylesheet" href="styles/bootstrap.min.css"/>
    <link rel="stylesheet" href="styles/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="styles/font-styles.css"/>
    <link rel="stylesheet" href="styles/main.css"/>
    <!-- endbuild -->

    </head>
    <body>

    <!--[if lt IE 7]>
    <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
    <![endif]-->

    <!-- Add your site or application content here -->

    <!-- My templates used to be here, but now they are in templates.js -->

    <div class="pagination">
    <ul>
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Next</a></li>
    </ul>
    </div>
    </script>

    <!-- build:js scripts/scripts.js -->
    <script src="scripts/vendor/jquery-1.9.1.js"></script>
    <script src="scripts/vendor/handlebars.1.0.rc.3.js"></script>
    <script src="scripts/vendor/ember-1.0.0-rc.2.js"></script>
    <script src="scripts/vendor/ember-data.js"></script>
    <script src="scripts/vendor/bootstrap.min.js"></script>
    <script src="scripts/templates.js"></script>
    <script src="scripts/main.js"></script>
    <!-- endbuild -->

    </body>
    </html>

    最佳答案

    Since we are using yeoman/grunt, I have come across this handlebars plugin.



    那就是让您绊倒的原因。您正在尝试使用 grunt-contrib-handlebars插件,因此未将已编译的模板添加到 Ember.TEMPLATES。可以配置 grunt-contrib-handlebars来实现这一点,但是使用(grunt-ember-templates)[ https://github.com/dgeb/grunt-ember-templates]可能更容易。

    有关更多详细信息,请参见 How does Ember.js reference Grunt.js precompiled Handlebars templates?

    How can I "initialize" the handlebars templates, which are right nor in templates.js, so that Ember can find them?



    Ember不在乎事情如何进入Ember.TEMPLATES。您可以手动从中添加/删除模板。例如:
    Ember.TEMPLATES['myFunkyTemplate'] = Ember.Handlebars.compile('Hello {{personName}}');

    How can I tell ember where to place the templates in the DOM, since the templates are now out of the document body?



    模板来自哪里都无所谓, Ember 只看模板的ID。 application.hbs模板将呈现到应用程序的根元素中(默认情况下为document.body),所有其他模板都将通过 View 助手等呈现到导出中。

    关于ember.js - 结合使用grunt Handlebars 和 Ember ,将模板拆分为单独的文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15877005/

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