Ember hbs 템플릿이 입력 필드에서 함수로 매개 변수를 전달해야합니까? 그렇다면 어떻게해야합니까?

Question

입력란과 연결된 단추가있는 양식이 있으며 사용자가 입력 필드에 입력하는 값을 갖고 싶은 기능이 있습니다. hbs 템플릿에서 어떻게 든 그것을 전달해야합니까, 아니면 그냥 가서 함수에서 DOM에서 가져와야합니다.

이게 있나요? 아래 그림과 같이

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

Answer 1

개념적으로 - 올바른 방향으로 가고 있습니다. - 그리고이 경우

는 ... 여기에 경로 (응용 프로그램 루트) 여기

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); 
    }, 
    }, 

}); 

및 템플릿입니다 (응용 프로그램 템플릿)

{{input value=userInputProperty}} 

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

이 작업은 함수 이름을 걸립니다 함수에 전달할 매개 변수 값.

수행하려는 작업에 따라 몇 가지 방법을 사용할 수 있습니다.

https://ember-twiddle.com/3080649ecf98cddef6d3d64b186ba741?openFiles=templates.application.hbs%2C (트위을위한 좋은 시간)

Answer 2

예는 action의 value 속성으로이 작업을 수행 할 수 있습니다

다음

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

가 당신을 위해 ember-twiddle입니다.

Answer 3

입력 상자의 값을 컨트롤러 속성에 바인딩 할 수 있으며이 속성을 사용하여 단추 동작에서 입력 상자의 값을 얻을 수 있습니다.

여기에 ember-twiddle이 있습니다.

참고 : Ember 컨트롤러는 SINGLETONS입니다.

Answer 4

직접 값을 전달하는 것은 불가능하지만 값을 속성에 바인딩 할 수 있습니다. 입력을 구성 요소에 랩핑하고 입력 값을 구성 요소 속성에 바인딩하는 것이 좋습니다. 그런 다음 값을 조치 매개 변수로 전달하거나 구성 요소의 조치 핸들러에서 직접 액세스 할 수 있습니다. 이 솔루션은 싱글 톤 컨트롤러를 피하고 구성 요소를 재사용 할 수 있습니다.

https://guides.emberjs.com/v2.18.0/templates/actions 및 https://guides.emberjs.com/v2.18.0/templates/input-helpers도 참조하십시오.