Sollte die Ember hbs Vorlage Parameter von einem Eingabefeld zu einer Funktion übergeben und wenn ja wie?

Question

Ich habe ein Formular, das ein Eingabefeld und eine zugeordnete Schaltfläche hat, und ich habe eine Funktion, die den Wert haben möchte, den der Benutzer in das Eingabefeld eingibt. Sollte ich es irgendwie von der hbs-Vorlage weitergeben oder sollte ich es einfach vom DOM in die Funktion holen.

Gibt es so etwas?

{{ action myFunction $("#myInputId").val() }} 

Answer 1

Konzeptionell - Sie sind auf dem richtigen Weg.

In diesem Fall ... hier ist eine Strecke (Anwendung Route)

import Ember from 'ember'; 

export default Ember.Route.extend({ 

    alertInput: function(inputValue) { 
    alert(inputValue); 
    }, 

    actions: { 
    doSomething(userInput) { // (this is already a function) 
    // alert(userInput); // or... use a regular function in the action 
     this.get('alertInput')(userInput); 
    }, 
    }, 

}); 

und hier ist eine Vorlage (Anwendungsvorlage)

{{input value=userInputProperty}} 

<button {{action 'doSomething' userInputProperty}}>doSomething</button> 

Diese Aktion führt einen Funktionsnamen - und dann Ein Wert als Parameter, der an die Funktion übergeben wird.

Es gibt ein paar Möglichkeiten, wie Sie Dinge tun können, je nachdem, was Sie versuchen zu tun.

https://ember-twiddle.com/3080649ecf98cddef6d3d64b186ba741?openFiles=templates.application.hbs%2C (gute Zeit für einen twiddle)

Answer 2

Ja, Sie können dies tun, indem value Eigenschaft action wie unten dargestellt:

<input oninput={{action "myaction" value="target.value"}}/> 

Hier ein ember-twiddle für Sie.

Answer 3

Sie können den Wert des Eingabefelds an eine Controller-Eigenschaft binden, und Sie können diese Eigenschaft verwenden, um den Wert des Eingabefelds in der Schaltflächenaktion abzuleiten.

Hier ist ein ember-twiddle für Sie.

Hinweis: Ember Controller sind SINGLETONS.

Answer 4

Das direkte Übergeben des Werts ist nicht möglich, aber Sie können den Wert an eine Eigenschaft binden. Ich würde vorschlagen, die Eingabe in eine Komponente zu wickeln und den Eingabewert an eine Komponenteneigenschaft zu binden. Dann können Sie den Wert als Aktionsparameter übergeben oder direkt im Aktionshandler der Komponente darauf zugreifen. Diese Lösung vermeidet einen Singleton-Controller, und die Komponente könnte möglicherweise wiederverwendet werden.

Siehe auch https://guides.emberjs.com/v2.18.0/templates/actions und https://guides.emberjs.com/v2.18.0/templates/input-helpers.