¿Es posible cargar la plantilla del manillar con la etiqueta de script? O defina plantillas de barra de herramientas de forma programática en Ember.js

handlebars.js

Question

Simplemente no quiero definir todas las plantillas de mi manillar en mi archivo html

Intenté esto

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

Pero esto no funciono. ¿No puedo definir las plantillas de mi plantilla mediante programación o incluso simplemente cargar archivos de manubrio para que pueda volver a usar y también siento que hace las cosas un poco más fáciles de mantener.

Intenté simplemente cargarlos con ajax y anexarlos a la cabeza, esto funciona bien, puedo verlo allí, pero ember.js no lo lee después de que ya se haya cargado la brasa y las plantillas no estén definidas.

Answer 1

O defina las plantillas del manillar de forma programática en Ember.js

Puede definir las plantillas mediante programación utilizando Ember.Handlebars.compile , consulte http://jsfiddle.net/pangratz666/wxrxT/ :

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

O agrega plantillas compiladas a Ember.TEMPLATES array, consulte http://jsfiddle.net/pangratz666/58tFP/ :

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

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

Recomendaría usar algunas herramientas como dijo Richard Millan . También eche un vistazo a interline/ember-skeleton que ofrece soporte para la compilación de plantillas.

Answer 2

Aquí hay otra solución, dentro de su vista / componente de Ember:

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

Answer 3

Entonces, como todavía quería archivos separados para mis plantillas y no quería definirlos en cadenas en el javascript, lo pirateé anoche

Es un cargador perezoso sincrónico, carga todas las plantillas primero, luego las brasas y el resto de mi código,

        //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'',
                    ]
            })
        }

EDITAR: Lo limpié y lo hice funcionar correctamente solo probando en cromo, aunque

Answer 4

Es posible, pero primero tendrá que precompilar sus plantillas. Esto también le permitirá incluir todas sus plantillas dentro de un archivo.

• Si está utilizando Rails, puede usar la gema ember-rails para hacerlo por usted.
• De lo contrario, puede seguir estas instrucciones sobre cómo precompilar el manubrio

Más adelante, deberá incluir el archivo javascript.

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

Answer 5

Es posible, y sí, puedes hacerlo sin usar otra herramienta de otro, simplemente usando ember.js y nada más. lo hice así:

1) código html tenga en cuenta que todos los archivos del manillar deben cargarse antes de usar cualquiera de ellos. aquí, es solo un archivo llamado 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) este archivo handlebars.js contiene lo siguiente, utilizando el compilador de la brasa

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

3) y luego dentro de su archivo app.js, simplemente úselo como estaba disponible (que es):

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

  }
});

hu.appendTo("body");  

Answer 6

Esta es una vieja pregunta, por lo que todas las respuestas están un poco desactualizadas. Con Ember CLI, las plantillas se cargan automáticamente nombrando la convención como módulos require.js. Es un poco extraño, ya que escribe la sintaxis de importación de ES6 propuesta y la compilación la transporta a la sintaxis require.js, pero funciona muy bien.

Answer 7

Si carga sus plantillas en el DOM antes de cargar Ember, entonces no necesita compilar o registrar sus plantillas. Ember vendrá después y lo hará por ti.

Aquí hay un artículo que muestra cómo:

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

Answer 8

También puede aplicar parches a Ember View para cargar plantillas al obtener

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;
    }
});

ACTUALIZACIÓN: desde Ember 1.0.0-pre.3 esta solución probablemente ya no funcione (tal vez se pueda migrar a Ember reciente)