動態生成基於對象陣列的組件

好的，我對Ember（和框架）很新穎，所以如果我遺漏了一些明顯的東西，請原諒我。動態生成基於對象陣列的組件

我有一個包含一些邏輯的設置菜單組件。該邏輯的一部分是一個返回對象數組（可能的設置）的計算屬性。它將該數據傳遞給視圖組件。

菜單component.js

possibleSettings: computed(function() { 
    // Example of returned data 
    return [ 
     { 
      type: 'time', 
      min: 1, 
      max: 60, 
     }, 
     }, 
      type: 'sound', 
      values: [‘alarm’, ‘beep’, ‘rooster’], 
     }, 
    ] 
});

菜單component.hbs

{{menu-component/menu-view 
    possibleSettings=possibleSettings}}

每個設置都有它自己的組件，例如：

菜單組分/time.hbs

<label>Time</label> 
{{input value=time}}

菜單組分/ sound.hbs

<label>Sound</label> 
{{dropdown items=sounds}}

我想要的視圖分量來呈現這些組件，基於possibleSettings的結果。因此，按照上面的示例數據，它需要同時呈現時間和聲音組件。

我想我需要這樣的東西，但我無法將頭圍繞在最後一點。我可以用新的眼光看待事物。

菜單組件/設置 - view.hbs

<div> 
    {{#each possibleSettings as |setting|}} 
     {{#if (eq setting.type time)}} 
      {{component ‘menu-component/time'}} 
     {{else if (eq setting.type sound)}} 
      {{component ‘menu-component/sound'}} 
     {{/if}} 
    {{/each}} 
</div>

任何幫助深表感謝。

來源

2017-10-19 J. B.

看來問題在於你沒有在你的把手中引用time引號，所以它在組件本身上尋找一個名爲time的屬性，而不是字符串"time"。另外，我不認爲你需要在這裏使用組件助手，因爲你無論如何都在硬編碼組件名稱。這裏是你的哈佛商學院在這方面的編輯

<div> 
    {{#each possibleSettings as |setting|}} 
    {{#if (eq setting.type "time")}} 
     {{menu-component/time}} 
    {{else if (eq setting.type "sound")}} 
     {{menu-component/sound}} 
    {{/if}} 
    {{/each}} 
</div>

或者，你可以做這樣的事情：

{{#each possibleSettings as |setting|}} 
    {{component (concat 'menu-component/' setting.type)}} 
{{/each}}

來源

2017-10-20 00:10:37

我完全忘了CONCAT，這就是我試圖實現的解決方案。同時，我的計算屬性名稱中有一個錯字，這就是爲什麼我花了兩個小時試圖弄清爲什麼我無法訪問object.keys .... d'oh！乾杯。 –

動態生成基於對象陣列的組件

回答

相關問題