Можно ли загрузить шаблон руля с тегом script? Или оформить шаблоны руля программно в Ember.js

Просто я не хочу определять все мои шаблоны руля в моем html файле

Я пробовал это

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

Но это не сработало. Могу ли я не определять шаблоны своего шаблона программным способом или даже просто загружать файлы руля, чтобы я мог повторно использовать его, а также я чувствую, что он делает вещи более удобными.

Я попробовал просто загрузить их с помощью ajax и добавить их в голову, это прекрасно работает, я вижу его там, но ember.js не читает его после того, как ember уже загружен и шаблоны не определены.

Ответы

Ответ 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();​

Я бы рекомендовал использовать некоторые инструменты, такие как Ричард Миллан. Также посмотрите interline/ember-skeleton, который предлагает поддержку для компиляции шаблонов.

Ответ 2

Вы также можете установить Ember View для загрузки шаблонов при получении

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 это решение probabaly больше не работает (возможно, его можно перенести на недавний Ember)

Ответ 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',
                    ]
            })
        }

EDIT: я очистил его и сделал так, чтобы он работал правильно, только тестирование на хроме, хотя

Ответ 4

Возможно, но сначала вам нужно предварительно скомпилировать свои шаблоны. Это также позволит вам включать все ваши шаблоны в один файл.

Позже вам нужно будет добавить файл javascript.

<script src="path/to/compiled/templates.js" type="text/javascript"></script>

Ответ 6

Здесь другое решение внутри вашего Ember view/component:

var viewClass = Ember.View.extend({ templateName: this.get('contentTemplate') });
var view = this.createChildView(viewClass);
var html = view.renderToBuffer().buffer;

Ответ 7

Это старый вопрос, поэтому все ответы немного устарели. С шаблонами Ember CLI автоматически загружаются соглашения об именах как модули require.js. Это немного странно, так как вы пишете предложенный синтаксис импорта ES6, а сборка транслирует его в синтаксис require.js, но он работает очень хорошо.

Ответ 8

Возможно, и да, вы можете сделать это без использования другого другого инструмента, просто используя 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");