Utilizzo di manubri grunt insieme a ember, per dividere i modelli in file separati

Sto provando a dividere i miei modelli di manubri ember.js in diversi file, al fine di rendere il codice base più gestibile.Utilizzo di manubri grunt insieme a ember, per dividere i modelli in file separati

Dal momento che stiamo usando yeoman/grunt, ho trovato this handlebars plugin. L'ho configurato come segue:

handlebars: { 
     compile: { 
      options: { 
       namespace: 'JST' 
      }, 
      files: { 
       '<%= yeoman.dist %>/scripts/templates.js': [ 
        '<%= yeoman.app %>/templates/*.hbs' 
       ], 
      } 
     } 
    }

Come suggerito nella sezione "Esempi di utilizzo" del plug-in. Funziona come previsto, generando un file dist/scripts/templates.js. Ma mettere i modelli nello spazio dei nomi 'JST' li rende non più accessibili a Ember. Questo è l'errore che sto ottenendo:

Uncaught Error: assertion failed: You specified the templateName application for <App.ApplicationView:ember312>, but it did not exist.

Alcune domande:

Come faccio a "inizializzare" i modelli di manubrio, che sono in questo momento in templates.js, in modo che Ember può trovarli?
Come posso dire a dove e dove collocare i modelli nel DOM, poiché i modelli sono ora fuori dal corpo del documento?

Questo è il mio index.html:

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
    <head> 
    <meta charset="utf-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
    <title></title> 
    <meta name="description" content=""/> 
    <meta name="viewport" content="width=device-width"/> 

    <!-- build:css styles/main.css --> 
    <link rel="stylesheet" href="styles/bootstrap.min.css"/> 
    <link rel="stylesheet" href="styles/css/font-awesome.min.css"/> 
    <link rel="stylesheet" href="styles/font-styles.css"/> 
    <link rel="stylesheet" href="styles/main.css"/> 
    <!-- endbuild --> 

    </head> 
    <body> 

    <!--[if lt IE 7]> 
     <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p> 
    <![endif]--> 

    <!-- Add your site or application content here --> 

    <!-- My templates used to be here, but now they are in templates.js --> 

     <div class="pagination"> 
      <ul> 
       <li><a href="#">Prev</a></li> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
       <li><a href="#">Next</a></li> 
      </ul> 
     </div> 
    </script> 

    <!-- build:js scripts/scripts.js --> 
    <script src="scripts/vendor/jquery-1.9.1.js"></script> 
    <script src="scripts/vendor/handlebars.1.0.rc.3.js"></script> 
    <script src="scripts/vendor/ember-1.0.0-rc.2.js"></script> 
    <script src="scripts/vendor/ember-data.js"></script> 
    <script src="scripts/vendor/bootstrap.min.js"></script> 
    <script src="scripts/templates.js"></script> 
    <script src="scripts/main.js"></script> 
    <!-- endbuild --> 

    </body> 
</html>

fonte

2013-04-08 dangonfast

solo curioso-qual è il tuo back-end? –

Dal momento che stiamo usando Yeoman/grugnito, mi sono imbattuto in questo manubri plugin.

Ecco cosa ti fa inciampare. Stai tentando di utilizzare il plug-in grunt-contrib-handlebars e, di conseguenza, i modelli compilati non vengono aggiunti a Ember.TEMPLATES. Potrebbe essere possibile configurare grunt-contrib-handlebars per far sì che ciò accada, ma sarebbe probabilmente più facile da usare (modelli grung-ember) [https://github.com/dgeb/grunt-ember-templates].

Vedi How does Ember.js reference Grunt.js precompiled Handlebars templates? per maggiori dettagli

Come posso "inizializzare" i modelli di manubrio, che sono di destra né a templates.js, in modo che Ember può trovarli?

Ember non si cura di come vanno le cose a Ember.TEMPLATES. È possibile aggiungere/rimuovere modelli manualmente da esso. Per esempio:

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

Come posso dire brace dove collocare i modelli nella DOM, poiché i modelli sono ora fuori il corpo del documento?

Non importa da dove provengano i tuoi modelli, tutti gli sguardi d'ambra sono l'id del modello. Il modello application.hbs verrà reso nell'elemento principale dell'applicazione (document.body per impostazione predefinita) e tutti gli altri modelli verranno renderizzati in prese, tramite helper di visualizzazione, ecc.

fonte

2013-04-08 12:30:13

Grazie. Ora sto provando a configurare 'grunt-ember-templates'. L'ho installato con 'npm install grunt-ember-templates', e l'ho configurato nel mio' Gruntfile.js', ma non è disponibile come task grunt. Fare 'grunt --help' mostra molte attività disponibili (inclusi i vecchi' manubri' che avevo installato), ma 'ember_templates' non appare. Perché potrebbe essere?'npm -ls' si lamenta con' npm ERR! estraneo: [email protected] .../node_modules/grunt-ember-templates'' – dangonfast

Rispondere alla mia domanda: 'grunt-ember-templates' non è stato aggiunto al pacchetto della mia applicazione.json, quindi ho per aggiungerlo manualmente. Strano, dal momento che sono abbastanza sicuro che altri pacchetti siano stati aggiunti automaticamente al pacchetto dell'applicazione. Json. – dangonfast

Cool felice che abbia funzionato per te. Ri: aggiungendo a package.json, npm lo farà se aggiungi --save o -S quando installi la tua dipendenza. Quindi per esempio '$ npm installa grunt-ember-templates --save' –

Utilizzo di manubri grunt insieme a ember, per dividere i modelli in file separati

risposta

Problemi correlati