So ändern Sie die Attribute eines HTML-Elements in emberJS aus dem afterModel oder einer ähnlichen Methode

Ich habe eine Route und eine entsprechende Vorlage in meiner Ember-Anwendung. Beim Laden der Seite möchte ich einige Elemente basierend auf dem URL-Parameter ausblenden. Ich versuchte dies in der afterModel-Methode mit jquery $.("elementName").hide(); und einigen anderen Kombinationen. Aber nichts funktioniert, weil es scheint, dass das DOM noch nicht verfügbar ist. Das Gleiche kann erreicht werden wie eine Tastenaktion im Bereich Aktionen, aber es hilft mir nicht, wie ich es beim Laden der Seite tun möchte. Kann jemand darauf hinweisen, was ich falsch mache?So ändern Sie die Attribute eines HTML-Elements in emberJS aus dem afterModel oder einer ähnlichen Methode

Quelle

2017-02-20 Rahul

Sie können wahrscheinlich 'didInsertElement' verwenden. Aber das ist nicht Glimm-artig. Warum verstecken Sie die Elemente nicht standardmäßig und schalten sie bei Bedarf ein? –

@torazaburo das ist, was ich getan habe und es hat funktioniert. Ich musste den Haken didTransition und 'after-render' verwenden. Aber die ideale Methode wäre, Helfer wie unten erwähnt zu verwenden, ich werde es an meinem Morgen ausprobieren und Sie wissen lassen, ob es funktioniert. – Rahul

Ich denke, Sie könnten das "didTransition" -Event in Ihrer Route verwenden –

Der richtige Weg, dies zu tun, ist Ember zu verwenden und der Lenker {{#if}} Helfer. Wenn Sie kombinieren diese mit queryParams seine recht einfach:

Ihr Controller kann wie folgt aussehen:

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

Und Ihre Vorlage wie folgt aus:

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

Wenn Sie wirklich wollen Um das DOM manuell zu manipulieren, können Sie dies im didInsertElement Hook tun. Aber Sie haben diese nur in einer Komponente:

so die my-component.hbs könnte wie folgt aussehen:

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

und Ihre my-component.js

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

aber ich empfehlen, gegen das!

Quelle

2017-02-20 16:22:22 Lux

Was ist der Zweck von this._super(), warum empfehlen Sie gegen diesen Ansatz? Ich habe dies in der Route selbst gelöst, indem ich didTransition und afterRender verwendet habe. Ich habe den folgenden Link verwiesen: https://discuss.emberjs.com/t/is-there-an-event-after-the-template-has-been-added-the-outlet/8737. Eine weitere Sache ist, dass ich ab sofort keinen Controller in meiner App habe. Ich denke, ich könnte es hinzufügen, aber ich bin mir nicht sicher, ob es nötig ist. Ich warte auf morgen, um Ihre Herangehensweise auszuprobieren. – Rahul

Checkout [diesen Link] (https://guides.emberjs.com/v2.11.0/object-model/classes-and-instances/#toc_overriding-parent-class-methods). 'das._super() 'ruft die überschriebene Methode auf. Und ich empfehle den ersten Ansatz, weil es die einzige Art ist, dies zu tun. Wenn Sie dies manuell tun, arbeiten Sie grundsätzlich gegen das Framework. Auch dies in der Route zu tun ist nicht unterstützt Verhalten ich denke.Ember könnte entscheiden, die Komponente jederzeit neu zu rendern. Auch wenn Sie Lenker verwenden, wird der Knoten tatsächlich aus dem DOM entfernt, und dies erhöht die Leistung. Auch warum sollte nicht so verwendet werden? – Lux

Sind Ihre URL-Parameter queryParams auf der Route? Wenn dies der Fall ist, können Sie Eigenschaften auf Ihrem Controller festlegen, um deren Vorhandensein (oder eine andere truthige Bedingung) zu überprüfen und diese in Ihrer Vorlage für die DOM-Anzeigezwecke zu verwenden. Sie können diese Werte sogar an untergeordnete Komponenten senden.

Routen/index.js

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

Controller/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

Quelle

2017-02-20 16:16:17

So ändern Sie die Attribute eines HTML-Elements in emberJS aus dem afterModel oder einer ähnlichen Methode

Antwort

Verwandte Themen