在handlebars / ember模板中定义数组？ [英] Define array inside template for handlebars/ember?

问题描述

我在ember应用程序中有一个handlebars模板。它接受一个数组。我现在声明这样的数组

模板：

  {{ Gd-radio-input content = radioContent value =blue}} 
  

Javascript：

  App.IndexController = Em.Controller.extend（{
 radioContent：[
 {label：'Red'，value ：'red'}，
 {label：'Blue'，value：'blue'}，
 {label：'Green'，value：'green'}，
 {label：黄色，值：'yellow'}，
] 
}）; 
  

为了我的目的，我想有时在模板中定义数组。

我试过这个，但javascrip恨我：

  {{Gd-收音机输入content =[
 {label：'Red'，value：'red'}，
 {label：'Blue'，value：'blue'}，
 {label：'Green' ，value：'green'}，
 {label：'Yellow'，value：'yellow'}，
]value =blue}} 
  

错误：

 断言失败： #each循环必须是一个数组。你通过了[
 {label：'Red'，value：'red'}，
 {label：'Blue'，value：'blue'}，
 {label：'Green'值：'green'}，
 {label：'Yellow'，value：'yellow'}，
] 
 
未捕获TypeError：Object [
 {label： 'red'，value：'red'}，
 {label：'Blue'，value：'blue'}，
 {label：'Green'，value：'green'}，
 {label：'Yellow'，value：'yellow'}，
]没有方法'addArrayObserver'
  

解决方案

这不是憎恨你的javascript，它是handlebars / helper。当您使用内联字符串绑定内容时，它不会将其转换为数组。

您可以添加一些contentString值，将其从字符串转换为数组并将其设置在内容上。

  { {Gd-radio-input contentString =[
 {label：'Red'，value：'red'}，
 {label：'Blue'，value：'blue'}，
 {label：'Green'，value：'green'}，
 {label：'Yellow'，value：'yellow'}，
]value =blue}} 
 
 
 GdRadioInput = Em.Componenet.extend（{
 watchContentString：function（）{
 var cs = this.get（'contentString'）; 
 if（cs） {
 this.set（'content'，eval（cs））; 
} 
} .on（'init'）
}）; 
  

*请注意，我不是真的推荐使用eval，我只是懒惰。 >

I have a handlebars template in an ember application. It accepts an array. I currently declare the array like this

template:

  {{Gd-radio-input content=radioContent value="blue"}}

Javascript:

App.IndexController = Em.Controller.extend({
    radioContent: [
        {label: 'Red', value: 'red'},
        {label: 'Blue', value: 'blue'},
        {label: 'Green', value: 'green'},
        {label: 'Yellow', value: 'yellow'},
  ]
});

For my purposes, I would like to define the array inside the template sometimes.

I tried this, but javascrip hates me:

  {{Gd-radio-input content="[
    {label: 'Red', value: 'red'},
    {label: 'Blue', value: 'blue'},
    {label: 'Green', value: 'green'},
    {label: 'Yellow', value: 'yellow'},
  ]" value="blue"}}

Errors:

Assertion failed: The value that #each loops over must be an Array. You passed [
        {label: 'Red', value: 'red'},
        {label: 'Blue', value: 'blue'},
        {label: 'Green', value: 'green'},
        {label: 'Yellow', value: 'yellow'},
      ] 

Uncaught TypeError: Object [
        {label: 'Red', value: 'red'},
        {label: 'Blue', value: 'blue'},
        {label: 'Green', value: 'green'},
        {label: 'Yellow', value: 'yellow'},
      ] has no method 'addArrayObserver' 

解决方案

It isn't javascript that hates you, it's handlebars/helper. When you bind the content using the inline string it doesn't convert it to an array for you.

You could add some sort of contentString value that would convert it back from a string to an array and set it on the content.

{{Gd-radio-input contentString="[
    {label: 'Red', value: 'red'},
    {label: 'Blue', value: 'blue'},
    {label: 'Green', value: 'green'},
    {label: 'Yellow', value: 'yellow'},
  ]" value="blue"}}


GdRadioInput = Em.Componenet.extend({
  watchContentString: function(){
    var cs = this.get('contentString');
    if(cs){
      this.set('content', eval(cs));
    } 
  }.on('init')
});

*Note, I'm not really recommending using eval, I'm just lazy.

这篇关于在handlebars / ember模板中定义数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！