¿Es posible cargar la plantilla del manillar con la etiqueta de secuencia de comandos? O definir plantillas de manillar mediante programación en Ember.js

Question

Simplemente lo suficientemente No quiero definir todos mis plantillas del manillar en mi archivo html

probé este

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

Pero esto no funcionó. ¿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 definir plantillas de manillar mediante programación en Ember.js

Puede definir plantillas de programación utilizando Ember.Handlebars.compile, ver http://jsfiddle.net/pangratz666/wxrxT/:

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

O añadir plantillas compiladas a Ember.TEMPLATES matriz, 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 a utilizar algunas herramientas como Richard Millán declaró. También eche un vistazo a interline/ember-skeleton que ofrece soporte para la compilación de plantillas.

Answer 2

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 el ember-rails gem para hacerlo por usted.
• De lo contrario, puede seguir these instructions on how to precompile handlebars

Más adelante, tendrá que incluir el archivo JavaScript.

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

Answer 3

lo tanto, ya que todavía quería archivos separados para mis plantillas y yo no quería que definirlos en cadenas en el javascript Pirateé esto juntos anoche

Está un cargador lento síncrono, carga todas las plantillas en primer lugar, a continuación, brasa 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', 
        ] 
      }) 
     } 

EDIT: lo limpió y lo hizo funcionar correctamente sólo las pruebas en cromo, aunque

Answer 4

es posible, y sí, puede hacerlo sin uso de otra herramienta otra, solo nosotros ing 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 manubrios.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 contiene los siguientes handlebars.js, usando el compilador de brasa

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

3) y luego dentro de su archivo app.js, sólo tiene que utilizar, ya que estaban disponibles (lo cual es):

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

    } 
}); 

hu.appendTo("body"); 

Answer 5

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

Aquí está un artículo que muestra cómo:

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

Answer 6

También puede parchear Ember Ver para cargar plantillas en conseguir

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 este solución probablemente no más trabajo (quizás se pueda migrar a Ember reciente)

Answer 7

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 8

Esta es una pregunta antigua, por lo que todas las respuestas están un poco desactualizadas. Con Ember CLI, las plantillas se cargan automáticamente al nombrar las convenciones 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.