Ember + Handlebars在运行时动态选择视图 [英] Dynamically choosing a view at runtime with Ember + Handlebars

问题描述

我正在使用Ember，Ember Data和Handlebars来显示具有多种不同类型模型的时间轴。我目前的实施虽然运作正常，但似乎可以通过公约和帮手大大改善。但是，我不知道如何使用已经定义的模板。

这是我所拥有的：

<$ pre $ >
{{#each this}}
{{#is constructor =App.Design}}
...关于设计的东西
{{/ is}}
{{#is constructor =App.Order}}
...有关订单的内容
{{/是}}
{{#is constructor =App。消息}}
...关于消息的东西
{{/是}}
{{/ each}}
< / ol>
{{/ with}}
{{/ view}}


。 ..帮助... ...

  Handlebars.registerHelper（'is'，function（options）{
 if（this.constructor == options.hash [constructor]）{
 return options.fn（this）; 
} 
}）; 
  

我宁愿依靠一些惯例来找出要呈现的视图。例如：

 < script type =text / x-handlebars-templatedata-model =App.Design ID = 设计图 > 
 ...关于设计的东西
< / script> 
 
< script type =text / x-handlebars-templatedata-model =App.Orderid =order-view> 
 ...有关订单的内容
< / script> 
  

也许数据模型属性可以用于确定对象的呈现方式。

  {{＃查看App.SelectedAccountView contentBinding =App.selectedAccountController.everythingSorted}} 
 {{#with content}} 
< ol class =timeline> 
 {{#each this}} 
 {{查看此}} 
 {{/ each}} 
< / ol> 
 {{/ with}} 
 {{/ view}} 
  

唉，我不知道如何从帮助程序中访问模板。

  Handlebars.registerHelper（'viewish'，function ）{
 //我可以访问模板这个问题
 //不是必需的
 // Handlebars.TEMPLATES未定义... 
}）; 
  

另外这是我应该用Handlebars吗？

解决方案

使用ViewStates，请参阅以下示例：

http://jsfiddle.net/rsaccon/AD2RY/

I am using Ember, Ember Data, and Handlebars to display a timeline with a number of different types of models. My current implementation, though functioning properly, seems like it could be drastically improved with a convention and a helper. However, I can't figure out how to use already defined templates.

This is what I have:

{{#view App.AccountSelectedView contentBinding="App.selectedAccountController.everythingSorted"}}
  {{#with content}}
    <ol class="timeline">
      {{#each this}}
        {{#is constructor="App.Design"}}
        ... stuff about the design
        {{/is}}
        {{#is constructor="App.Order"}}
        ... stuff about the order
        {{/is}}
        {{#is constructor="App.Message"}}
        ... stuff about the message
        {{/is}}
      {{/each}}
    </ol>
  {{/with}}
{{/view}}

...along with a helper...

Handlebars.registerHelper('is', function(options) {
  if (this.constructor == options.hash["constructor"]) {
    return options.fn(this);
  }
});

I would rather rely on some convention to figure out what view to render. For example:

<script type="text/x-handlebars-template" data-model="App.Design" id="design-view">
... stuff about the design
</script>

<script type="text/x-handlebars-template" data-model="App.Order" id="order-view">
... stuff about the order
</script>

Perhaps the data-model attribute could be used to determine how an object is rendered.

{{#view App.SelectedAccountView contentBinding="App.selectedAccountController.everythingSorted"}}
  {{#with content}}
    <ol class="timeline">
      {{#each this}}
        {{viewish this}}
      {{/each}}
    </ol>
  {{/with}}
{{/view}}

Alas, I can't figure out how to access templates from a helper.

Handlebars.registerHelper('viewish', function(options) {
   // Were I able to access the templates this question
   // would be unnecessary.
   // Handlebars.TEMPLATES is undefined...
});

Also, is this something I should want to do with Handlebars?

解决方案

use ViewStates, see examples at:

http://jsfiddle.net/rsaccon/AD2RY/

这篇关于Ember + Handlebars在运行时动态选择视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！