如何從路由更改 Ember JS 中字段的屬性

Question

在我的應用程序中，我有一個包含 2 個字段的模板文件（比如 name1/name2）。 基於路線中的一個參數（“偏好”），我想在屏幕上顯示 Recipe1 或 Recipe2。 例如：如果偏好是蔬菜，我應該顯示 Recipe1 否則 Recipe2。 我試過如下，但沒有用。

 export default Ember.Route.extend({
 beforeModel(){
 if (preference==='veg'){
     console.log("Inside Veg..");
     Ember.$("#Recipe2").attr("type","hidden");
 }
 else {
     console.log("Inside Non Veg..");
     Ember.$("#Recipe1").attr("type","hidden");
 }

我看到的是它進入 if/else 循環，但 ember.$ 語句沒有任何區別。請幫忙。

Answer 1

首先你不應該在beforeModel鈎子里面寫Ember.$ 。 那是錯誤的。 當beforeModel鈎子被調用時，DOM 不會准備好。 我更喜歡您創建組件並將preference屬性傳遞給組件並檢查是否在 hbs 中顯示它

創建my-receipe組件並將其包含在 template.hbs 中

{{my-receipe preference=preference }}

我的收據.hbs

{{#if isVeg}}
 <input type="text" id="Recipe1" />
{{else}}
<input type="text" id="Recipe2" />
{{/if}}

我的receipe.js

創建 isVeg 計算屬性，如果首選項為 veg，它將返回 true。

export default Ember.Component.extend({
    isVeg: Ember.computed('preference', function() {
        return Ember.isEqual(this.get('preference'), 'veg');
    })
})