21

很简单，我不想在我的 html 文件中定义我所有的车把模板

我试过这个

<script type="text/x-handlebars" data-template-name="nav-bar" src="template.handlebar"></script>

但这没有用。我可以不以编程方式定义模板我的模板，甚至只是加载把手文件以便我可以重用，而且我觉得它使事情更易于维护。

我尝试使用 ajax 加载它们并将它们附加到头部，这工作正常我可以在那里看到它但是 ember.js 在 ember 已经加载并且未定义模板后不会读取它。

4

8 回答 8

9

或者在 Ember.js 中以编程方式定义车把模板

您可以使用 以编程方式定义模板Ember.Handlebars.compile，请参阅http://jsfiddle.net/pangratz666/wxrxT/：

Ember.View.create({
    personName: 'Dr. Tobias Fünke',
    template: Ember.Handlebars.compile('Hello {{personName}}')
}).append();​

或者您将已编译的模板添加到Ember.TEMPLATES数组中，请参阅http://jsfiddle.net/pangratz666/58tFP/：

Ember.TEMPLATES['myFunkyTemplate'] = Ember.Handlebars.compile('Hello {{personName}}');

Ember.View.create({
    personName: 'Dr. Tobias Fünke',
    templateName: 'myFunkyTemplate'
}).append();​

我会建议使用像Richard Millan所说的一些工具。还可以查看interline/ember-skeleton，它提供了对模板编译的支持。

于 2012-04-23T14:10:55.977 回答
9

您还可以修补 Ember View 以在 get 上加载模板

Em.View.reopen({
    templateForName: function(name, type) {
        if (!name) { return; }

        var templates = Em.get(this, 'templates'),
            template = Em.get(templates, name);

        if (!template) {
            $.ajax({
                url: 'templates/%@.hbs'.fmt(name),
                async: false
            }).success(function(data) {
                template = Ember.Handlebars.compile(data);
            });
        }

        if (!template) {
            throw new Em.Error('%@ - Unable to find %@ "%@".'.fmt(this, type, name));
        }

        return template;
    }
});

更新：由于 Ember 1.0.0-pre.3 这个解决方案可能不再工作（也许可以迁移到最近的 Ember）

于 2012-11-20T14:02:57.353 回答
5

因此，由于我仍然想要为我的模板提供单独的文件，并且我不想在 javascript 中的字符串中定义它们，所以我昨晚一起破解了这个

它是一个同步惰性加载器，它首先加载所有模板，然后是 ember 和我的其余代码，

        //fake function so that every loads fine will get redefined in application.js
        function initializeApp(){}

        function loadTemplates(){
            var arg = arguments[0],
                next = Array.prototype.slice.call(arguments,1);
            if(typeof arg != 'string'){
                arg()
            }else{
                var scriptObj = document.createElement('script');
                scriptObj.type = 'text/x-handlebars';
                $(scriptObj).attr('data-template-name', arg.replace('.handlebars', '').substring(arg.lastIndexOf('/')+1))
                $.get(arg, function(data){
                    scriptObj.text = data;
                    document.head.appendChild(scriptObj);
                    if(next.length > 0) loadTemplates.apply(this, next);
                });
            }
        }

        function loadScripts() {
            var script = arguments[0],
                scriptObj = document.createElement('script'),
                next = Array.prototype.slice.call(arguments,1);
            scriptObj.type = 'text/javascript';
            scriptObj.src = script;
            scriptObj.onload = scriptObj.onreadystatechange = (next.length > 0) ? function(){loadScripts.apply(this, next)} : function(){$(document).ready(function() {initializeApp()})};
            document.head.appendChild(scriptObj);
        }

        function loadApp(obj){
            loadTemplates.apply(this, obj.templates.concat(function(){loadScripts.apply(this,obj.scripts)}))
        }

        window.onload = function(){
            loadApp({
                templates:
                    [
                        '/javascripts/views/templates/nav-bar.handlebars',
                    ],
                scripts:
                    [
                        'https://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeGoogleMaps',
                        '/javascripts/lib/bootstrap.js', 
                        '/javascripts/lib/rails.js', 
                        '/javascripts/lib/ember.js',
                        '/javascripts/application.js',
                        '/javascripts/views/nav_bar.js',
                    ]
            })
        }

编辑：我清理它并使它正常工作，但只在 chrome 中测试

于 2012-04-23T23:57:58.310 回答
1

这是可能的，但您需要先预编译您的模板。这也将允许您将所有模板包含在一个文件中。

稍后，您将需要包含 javascript 文件。

<script src="path/to/compiled/templates.js" type="text/javascript"></script>
于 2012-04-23T03:30:32.973 回答
1

如果在加载 Ember 之前将模板加载到 DOM 中，则无需编译或注册模板。Ember 会随之而来并为你做这件事。

这是一篇文章，展示了如何：

http://weborient.wordpress.com/2012/09/02/loading-handlebars-templates-in-ember-using-curl-js/

于 2012-09-05T06:03:35.897 回答
0

这是另一个解决方案，在您的 Ember 视图/组件中：

var viewClass = Ember.View.extend({ templateName: this.get('contentTemplate') });
var view = this.createChildView(viewClass);
var html = view.renderToBuffer().buffer;
于 2014-07-09T07:14:53.340 回答
0

这是一个老问题，所以所有的答案都有些过时了。使用Ember CLI模板会通过命名约定自动加载为 require.js 模块。这有点奇怪，因为您编写了提议的 ES6 导入语法，并且构建将其转换为 require.js 语法，但它确实工作得很好。

于 2014-08-06T03:01:55.713 回答
-1

这是可能的，是的，你可以在不使用另一个另一个工具的情况下做到这一点，只使用 ember.js 就可以了。我是这样做的：

1）html代码。请注意，在使用其中任何一个之前，需要加载所有车把文件。在这里，它只有一个名为 handlebars.js 的文件

<body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
  <script src="js/libs/ember-0.9.8.1.min.js"></script>    
  <script src="js/handlebars.js"></script>
  <script src="js/app.js"></script>
</body>

2）这个文件handlebars.js包含以下内容，使用ember的编译器

var src = "Hello, <b>{{name}}</b>";
Em.TEMPLATES["say-hello"] = Em.Handlebars.compile(src);

3）然后在您的 app.js 文件中，按可用的方式使用它（它是）：

var hu = Em.View.create({
    templateName: "say-hello",
    name: "Allô", 
    mouseDown: function() {  
    window.alert("hello world!");

  }
});

hu.appendTo("body");
于 2012-07-20T13:54:43.787 回答