javascript - 如何从路由更改 Ember JS 中字段的属性

Question

在我的应用程序中，我有一个包含 2 个字段的模板文件(例如 name1/name2)。 基于 route 的一个参数(“偏好”)，我想在屏幕上显示食谱 1 或食谱 2。 例如:如果偏好是蔬菜，我应该显示食谱 1，否则显示食谱 2。 我尝试了如下方法，但没有成功。

 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 钩子(Hook)内编写 Ember.$ 。那是错误的。当 beforeModel 钩子(Hook)被调用时，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}}

my-receipe.js

创建 isVeg 计算属性，如果首选项为 veg，该属性将返回 true。

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