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

我在我的余烬应用程序中有一个路由和相应的模板。在页面加载时，我想隐藏一些基于URL参数的元素。我试图在afterModel方法中使用jquery $.("elementName").hide();和其他几个组合来做到这一点。但没有任何工作，因为它似乎DOM尚不可用。在操作部分中可以实现与按钮操作相同的功能，但它不能帮助我，因为我希望在页面加载时执行此操作。有人能指出我做错了什么吗？如何从afterModel或类似的方法更改emberJS中的HTML元素的属性

来源

2017-02-20 Rahul

您可以使用'didInsertElement'。但那不是Ember般的。相反，为什么不默认隐藏元素，并在需要时将其打开？ – 2017-02-20 16:18:17

@torazaburo这就是我所做的，它的工作。我必须使用hook didTransition和'after-render'。但理想的方法是使用下面提到的助手，我会在早上尝试一下，并告诉你它是否工作。 – Rahul

我想你可以使用路由中的“didTransition”事件 –

做到这一点，正确的方法是使用灰烬和手柄{{#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(); } } });

不过，我强烈反对的！

来源

2017-02-20 16:22:22 Lux

this._super（）的目的是什么，为什么你建议不要这种方法？我通过使用didTransition和afterRender解决了这个问题。我提到了以下链接：https：//discuss.emberjs.com/t/is-there-an-event-after-the-template-has-been-added-to-the-outlet/8737。还有一件事是，我的应用程序目前还没有控制器。我想我可以添加它，但我不确定是否需要。我正在等待明天尝试你的方法。 – Rahul

结帐[此链接]（https://guides.emberjs.com/v2.11.0/object-model/classes-and-instances/#toc_overriding-parent-class-methods）。 '这一点。_super（）'正在调用覆盖的方法。我确实推荐了第一种方法，因为它是唯一可以做到这一点的简单方法。如果您手动执行此操作，则基本上可以对该框架进行操作。在路线中这样做并不支持我认为的行为.Ember可以随时决定重新渲染组件。另外，如果使用handlebars，节点实际上将从DOM中删除，所以这会提高性能。另外为什么不用这种方式？ – Lux

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

路线/ index.js

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

控制器/ index.js

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

模板/ index.hbs

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

来源

2017-02-20 16:16:17

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

回答

相关问题