In che modo Ember.js fa riferimento a Grunt.js precompilati i modelli di Handlebars?

Question

Ho esplorato Ember.js, insieme a Grunt.js ma non riesco a capire come Ember.js sia in grado di trovare e utilizzare i modelli manubrio precompilati. In questo momento il mio Gruntfile.js assomiglia a questo:

module.exports = function(grunt) { 

// Project configuration. 
grunt.initConfig({ 
pkg: grunt.file.readJSON('package.json'), 
handlebars: { 
    compile: { 
    files: { 
     "js/templates.js": "templates/*.hbs", 
    } 
    } 
} 
}); 

// Load the plugin that handles the handlebars compiling 
grunt.loadNpmTasks('grunt-contrib-handlebars'); 

// Default task(s). 
grunt.registerTask('default', ['handlebars']); 

}; 

E le mie opinioni app.js Ember sono dichiarati in questo modo (itinerari e controllori sono lasciati fuori):

App.LogoView = Ember.View.extend({ 
    templateName: 'logo', 
    classNames: ['logo'] 
}); 

App.TabsView = Ember.View.extend({ 
    templateName: 'tabs', 
    classNames: ['tabs'] 
}); 

App.TabView = Ember.View.extend({ 
    classNames: ['content'], 
    tabPositions: { 
    tab1: { 
     width: '90px', 
     left: '82px' 
    }, 
    tab2: { 
     width: '180px', 
     left: '172px' 
    }, 
    tab3: { 
     width: '271px', 
     left: '263px' 
    } 
    }, 
    animateTab: function() { 
    var left, tab, width; 
    tab = this.get('templateName'); 
    width = this.get('tabPositions.' + tab + '.width'); 
    left = this.get('tabPositions.' + tab + '.left'); 
    Ember.run.next(function() { 
     $('div.tabs').removeClass('tab1 tab2 tab3'); 
     $('div.tabs').addClass(tab); 
     $('div.slider div.foreground').stop().animate({ 
     'width': width 
     }, 1000); 
     $('div.slider div.handle').stop().animate({ 
     'left': left 
     }, 1000); 
    }); 
    }, 
    didInsertElement: function() { 
    this.animateTab(); 
    } 
}); 

App.SliderView = Ember.View.extend({ 
    templateName: 'slider', 
    classNames: ['slider'] 
}); 

App.Tab1View = App.TabView.extend({ 
    templateName: 'tab1' 
}); 

App.Tab2View = App.TabView.extend({ 
    templateName: 'tab2' 
}); 

App.Tab3View = App.TabView.extend({ 
    templateName: 'tab3' 
}); 

E questa è la mia struttura di file :

--/ 
    |--js/ 
    |--app.js 
    |--ember.js 
    |--handlebars.js 
    |--jquery.js 
    |--templates.js 
    |--templates/ 
    |--application.hbs 
    |--logo.hbs 
    |--slider.hbs 
    |--tab1.js 
    |--tab2.js 
    |--tab3.js 
    |--tabs.js 
    |--Gruntfile.js 
    |--index.html 
    |--package.json 
    |--server.js 

Così sto utilizzando la sintassi <script type="text/x-handlebars" data-template-name="slider"> nel mio file index.html per fare riferimento a modelli per nome e che funziona bene. Quello che non capisco, è come Ember.js dovrebbe utilizzare i modelli precompilati.

Al momento, sto utilizzando Grunt.js per compilare quelli e vengono inviati a templates.js. Secondo i documenti Ember quando un'applicazione carica, cercherà il modello dell'applicazione. In che modo funziona con index.html e cambiando il nome del file del template, cambia il nome del template? Qualcuno potrebbe indicarmi la giusta direzione su come Ember.js utilizza i modelli precompilati? Grazie!

Answer 1

Quello che non capisco, è come Ember.js dovrebbe utilizzare i modelli precompilati.

Ember si aspetta che i modelli compilati verranno aggiunti alla proprietà Ember.TEMPLATES. Quando viene caricata un'applicazione ember, controlla eventuali tag script manubri e li compila. Ogni modello viene quindi aggiunto a Ember.TEMPLATES utilizzando l'attributo data-template-name specificato come chiave. Se non viene fornito il nome del modello di dati, la chiave è impostata sull'applicazione.

Oltre a questo ember non interessa come vanno le cose in Ember.TEMPLATES. È possibile aggiungere/rimuovere modelli manualmente da esso. Ad esempio, https://stackoverflow.com/a/10282231/983357 dimostra come è possibile compilare un modello in linea:

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

Ora, ovviamente non si desidera scrivere i modelli in questo modo, si vuole grugnito di farlo per voi, ma come potete vedere non v'è niente di magico in corso ...

Secondo i documenti Ember quando un'applicazione carica, cercherà il modello dell'applicazione. In che modo funziona con index.html e cambiando il nome del file del template, cambia il nome del template?

Ember non si cura del nome del file del modello, si preoccupa solo di quale stringa è stata utilizzata come chiave in Ember.TEMPLATES['key/goes/here']. Detto questo, ha molto senso usare il nomefile come chiave per i tuoi modelli.

Qualcuno potrebbe indicarmi la giusta direzione su come Ember.js utilizza i modelli precompilati?

Penso che quello che manca nel progetto è probabilmente che i modelli compilati non vengono aggiunti a Ember.TEMPLATES. AFAIK il plugin grunt-contrib-handlebars non lo fa. Potresti utilizzare invece grunt-ember-templates.