是否可以使用脚本标记加载车把模板？或者在Ember.js中以编程方式定义车把模板

Question

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

我试过这个

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

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

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

Answer 1

或者在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,它支持编译模板.

Answer 2

您还可以修补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)

Answer 3

所以,因为我仍然想要我的模板单独的文件,我不想在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',
                    ]
            })
        }

编辑:我清理它,并使其正常工作,但只测试铬