Ember.js如何引用Grunt.js预编译的Handlebars模板？ [英] How does Ember.js reference Grunt.js precompiled Handlebars templates?

问题描述

我一直在探索Ember.js，以及Grunt.js，但是我不明白Ember.js如何能够找到并使用预编译的Handlebars模板。现在我的Gruntfile.js看起来像这样：

  module.exports = function（grunt）{
 
 //项目配置。 
 grunt.initConfig（{
 pkg：grunt.file.readJSON（'package.json'），
 handlebars：{
 compile：{
 files：{
js / templates.js：templates / *。hbs，
} 
} 
} 
}）; 
 
 //加载处理句柄的插件，编译
 grunt.loadNpmTasks（'grunt-contrib-handlebars'）; 
 
 //默认任务。 
 grunt.registerTask（'default'，['handlebars']）; 
 
}; 
  

我的app.js Ember视图被声明为如此（路由和控制器被省略）：

  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'
}）; 
  

这是我的文件结构：

   -  / 
 | --js / 
 | --app.js 
 | --ember.js 
 |  - 手柄.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 
  

所以我正在使用< script type =text / x-handlebarsdata-template-name =我的index.html文件中的slider> 语法以引用模板的名称，并且工作正常。我不明白的是，Ember.js应该如何使用预编译的模板。

现在，我使用Grunt.js来编译它们，并将它们输出到templates.js。根据Ember文档，当应用程序加载时，它将寻找应用程序模板。如何使用index.html和通过更改模板的文件名来改变模板的名称？有人可以指出Ember.js如何使用预编译模板的正确方向？谢谢！

解决方案

我不明白，Ember.js应该如何使用预编译的模板。

Ember希望将编译的模板添加到Ember.TEMPLATES属性。当加载了一个ember应用程序时，它会检查任何handlebars脚本标签并进行编译。然后，使用指定的data-template-name属性作为关键字，将每个模板添加到 Ember.TEMPLATES 中。如果没有提供数据模板名称，则将其密钥设置为应用程序。

除了那个ember不在乎如何进入 Ember.TEMPLATES 。您可以手动添加/删除模板。例如， https://stackoverflow.com/a/10282231/983357 演示了如何在线编译模板：

  Ember.TEMPLATES ['myFunkyTemplate'] = Ember.Handlebars.compile（'Hello {{personName}}'）; 
  

现在显然你不想这样写你的模板，你要咕噜做你，但是你可以看到没有任何魔法发生....

根据Ember文档，当应用程序加载时，它将寻找应用程序模板。如何使用index.html和通过更改模板的文件名来改变模板的名称？

Ember不关心模板的文件名，只是关心在 Ember.TEMPLATES [ '键/去/这里'] 。也就是说，使用filename作为模板的关键是非常有意义的。

有人可以指出我正确的方向，了解Ember.js如何使用预编译的模板？我想你的项目缺少的可能是编译的模板没有添加到 Ember.TEMPLATES中。 AFAIK的 grunt-contrib-handlebars 插件不这样做。请考虑使用 grunt-ember-templates 。

I've been exploring Ember.js, along with Grunt.js but I can't understand how Ember.js is able to find and use precompiled Handlebars templates. Right now my Gruntfile.js looks like this:

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']);

};

And my app.js Ember views are declared like so (routes and controllers are left out):

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

And this is my file structure:

--/
  |--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

So I'm using the <script type="text/x-handlebars" data-template-name="slider"> syntax in my index.html file to reference templates by name and that works fine. What I don't understand, is how Ember.js is supposed to use the precompiled templates.

Right now, I'm using Grunt.js to compile those and they are outputted to templates.js. According to the Ember docs when an application loads, it will look for the application template. How does that work with index.html and by changing the file name of the template, is that changing the template's name? Could someone point me in the right direction as to how Ember.js uses precompiled templates? Thanks!

解决方案

What I don't understand, is how Ember.js is supposed to use the precompiled templates.

Ember expects that compiled templates will be added to the Ember.TEMPLATES property. When an ember application is loaded it checks for any handlebars script tags and compiles them. Each template is then added to Ember.TEMPLATES using the specified data-template-name attribute as the key. If no data-template-name is provided they key is set to application.

Other than that ember does not care how things get into Ember.TEMPLATES. You can add/remove templates from it manually. For example, https://stackoverflow.com/a/10282231/983357 demonstrates how you can compile a template inline:

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

Now obviously you don't want to write your templates this way, you want grunt to do it for you, but as you can see there is nothing magic going on....

According to the Ember docs when an application loads, it will look for the application template. How does that work with index.html and by changing the file name of the template, is that changing the template's name?

Ember doesn't care about file name of the template, it just cares what string was used as key in Ember.TEMPLATES['key/goes/here']. That said, it makes a lot of sense to use filename as the key for your templates.

Could someone point me in the right direction as to how Ember.js uses precompiled templates?

I think what's missing from your project is probably that the compiled templates are not being added to Ember.TEMPLATES. AFAIK the grunt-contrib-handlebars plugin does not do this. Consider using grunt-ember-templates instead.

这篇关于Ember.js如何引用Grunt.js预编译的Handlebars模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！