如何从 afterModel 或一些类似的方法更改 emberJS 中 HTML 元素的属性

Question

我的 ember 应用程序中有一个路由和一个相应的模板。在页面加载本身上，我想根据 URL 参数隐藏一些元素。我尝试使用 jquery $.("elementName").hide(); 和其他一些组合在 afterModel 方法中执行此操作。但是没有任何效果，因为 DOM 似乎还不可用。可以通过操作部分中的按钮操作实现相同的效果，但它对我没有帮助，因为我想在页面加载时执行此操作。谁能指出我做错了什么。

Answer 1

你的 URL 参数 queryParams 在路线上吗？如果是这样，您可以在您的控制器上设置属性以检查它们的存在（或任何其他真实条件）并在您的模板中利用它们用于 DOM 显示目的。您甚至可以将这些值发送到子组件。

routes/index.js

queryParams: {
  q: {
    refreshModel: true
  },
  colors: {
    refreshModel: true
  }
}

controllers/index.js

q: '',
colors: [],
hasSearch: Ember.computed.notEmpty('q'), 
hasColors: Ember.computed.notEmpty('colors')

templates/index.hbs

{{#if hasSearch}}
  <p>You are searching for {{q}}</p>
{{/if}}
// .. etc for colors

Answer 2

正确的方法是使用 ember 和车把 {{#if}} 助手。如果将它与 queryParams 结合起来，它非常简单：

您的控制器可能如下所示：

export default Ember.Controller.extend({
  queryParams: ['showSomething'],
});

你的模板是这样的：

<h1>Hello</h1>
{{#if showSomething}}
  <div id="something">something</div>
{{/if}}

如果您真的想要手动操作 DOM，您可以在 didInsertElement 挂钩中执行此操作。但是，您 仅在一个组件中 :

所以 my-component.hbs 看起来像这样：

<div id="{{concat elementId "something"}}>something</div>

和你的my-component.js

export default Ember.Component.extend({
  didInsertElement() {
    this._super();
    if(false) {
      $(`#${this.get('elementId')}something`).hide();
    }
  }
});

但是，我强烈反对！

如何从 afterModel 或一些类似的方法更改 emberJS 中 HTML 元素的属性

How to change the attributes of a HTML element in emberJS from the afterModel or some similar method

ember.js

ember-cli