Best Practices für den Eingabe-Helper in neuen Ember-Komponenten

Ich lerne gerade über Embers neues Data-Down-Aktionsparadigma für Komponenten. Wie diskutiert here, aber manchmal möchte ich die untergeordnete Komponente erlauben, die Eigenschaft explizit zu ändern. Dies ist, wo die mut Helfer kommt: es erstellt einen Wrapper für den übergebenen Wert, enthält einen (nur?) Wert und eine Funktion, um es zu aktualisieren. Das Beispiel auf dieser Seite ist für eine einfache Schaltfläche, die einen Zähler erhöht.Best Practices für den Eingabe-Helper in neuen Ember-Komponenten

Wie funktioniert dieses Konzept, wenn ich den Eingabehelfer in einer Komponente verwende? Zum Beispiel, sagen wir, ich habe eine Form Gebäude, das aus einer Reihe von Sonderform Komponenten besteht:

// templates/index.hbs 
<form> 
    {{form-control value=(mut model.firstValue)}} 
    {{form-control value=(mut model.secondValue)}} 
</form>

Wenn die formSteuer Komponente hat nur die Aufgabe, die Eingangssteuer Einwickeln, wie verwenden wir das übergebene mut Objekt korrekt? Ist es ungefähr so?

// templates/components/form-control.hbs 
{{input type="text" value=attrs.value.value input=attrs.value.update}}

Mein Denken hier: der Wert des Eingangselements mit dem Wert des Objekt mut gesetzt ist, und wenn die Eingangswert ändert (HTML5 Eingabeereignis) die Update-Methode des mut Objekt aufgerufen, um die Modelleigenschaft auf den neuen Wert zu setzen. Es scheint jedoch etwas mit meinem Denken nicht in Ordnung zu sein, denn das funktioniert nicht. Was ist der "Standard" Weg, dies jetzt zu tun? Ich benutze Ember 1.13.8.

Quelle

2015-09-30 sammy34

Hier ist ein guter [Artikel] (http://emberup.co/bindings-with-htmlbars-helpers/?utm_source=Ember+Weekly&utm_campaign=d59b972512-Ember_Weekly_Issue_125&utm_medium=email&utm_term=0_e96229d21d-d59b972512-106355381) im Gespräch über die wandelbar und lese nur Helfer. Hoffentlich hilft das –

Danke Tyler, wirklich zu schätzen wissen. Leider hat es mir nicht so viel geholfen. Es zeigt die Ansicht des Verbrauchers, d. H. Wie eine schreibgeschützte Version des Wertes und eine Aktion zum Aktualisieren erzeugt werden, die beide an die Komponente übergeben werden. Wenn ich etwas nicht falsch verstehe, tut dies auch der mut-Helfer (d. H. Er erstellt eine readonly-Version des Wertes und eine Aktion, um ihn zu aktualisieren). Wo ich verloren gehe, ist auf der Komponentenseite, wenn ich diese beiden Zutaten in einem Eingabehelfer verwenden möchte ... Wie binde ich den schreibgeschützten Wert an die Eingabe und rufe die Aktualisierungsmethode auf, wenn sich die Eingabe ändert? – sammy34

In klassischen Komponenten (im Gegensatz zu Glimmerkomponenten) sind alle Bindungen veränderbar, daher ist es normalerweise nicht erforderlich, den mut Helfer zu verwenden. Die folgend sollte funktionieren:

// templates/index.hbs 
<form> 
    {{form-control value=model.firstValue}} 
    {{form-control value=model.secondValue}} 
</form> 

// templates/components/form-control.hbs 
{{input type="text" value=value}}

Die beabsichtigte Verwendung sowohl die mut Helfer und von attrs ist für Glimmer-Komponenten, auch Winkel Komponenten genannt, die derzeit nicht in Ember.js' stabilen Versionen veröffentlicht.

Quelle

2016-01-24 23:07:22 locks

Best Practices für den Eingabe-Helper in neuen Ember-Komponenten

Antwort

Verwandte Themen