기존 HTML 요소에 대한 값 바인딩

Question

Emberjs가 요소 값/속성 등을 컨트롤러에 바인딩하기 위해 제시 한대로 Emberjs를 사용하여 해당 요소를 만들어야합니다.

App.SearchTextField = Em.TextField.extend({ }); 

하고 뷰 : 예를 들어

{{view App.SearchTextField placeholder="Twitter username" 
          valueBinding="App.tweetsController.username"}} 

이 페이지의 거의 전체 내용이 Emberjs 제어하에해야한다는 것을 의미한다. 이것은별로 편리하지 않습니다.

기존 요소에 모든 유형의 값 또는 이벤트 바인딩을 수행 할 수 있습니까?

Answer 1

바인딩이 작동하려면 Ember는 바인딩 된 값이 변경되어 동기화되는시기를 알아야합니다. Ember가 값이 변경되었음을 알기 위해서는 Ember.set을 사용해야합니다. 예 : Ember.set를 사용하지 않고 특정 속성 변경, 엠버는 그것을 동기화해야한다는 모르는

그래서

object.set('value', 'I changed'); 
// This says: Ember, my value has changed, please sync! 

. 결과적으로이 이벤트 변경 내용을 청취하고 Ember에게 Ember.set을 사용하여 변경되었음을 알릴 필요가 있습니다.

입력 값에서 발생하는 문제입니다. 입력 할 때 값은 변경되지만 Ember.set은 호출되지 않습니다. 따라서 Ember.TextField은 무엇입니까? keyup 및 change 및 기타 이벤트를 듣고 이러한 이벤트 중 하나가 발생하면 Ember.set으로 전화합니다. 물론

, 당신은 이 그들을 사용하는이없는,하지만 당신은 수동으로 변경을 듣고 값이 변경 것을 엠버에게해야합니다 :

내가 왜 표시되지 않습니다) this.set('value', this.$().val())를 거의 모든 것을 할 수 있기 때문에 Ember.TextField을 사용하는 데 문제가 있습니다. 모든 일은 직접 이벤트를 듣는 수고를 덜어줍니다.

:

{{view Em.TextField placeholder="Twitter username" valueBinding="username" type="search"}} 

로 입력 거의 같은 양이다 : 당신이 도움이 될

한 것은 당신이 직접 대신을 확장 뷰를 만드는, 템플릿에서 사용할 수 있다는 것입니다

<input type="search" placeholder="Twitter username" value="some value" /> 

참고 : 위에서 제공 한 예에서 이전 튜토리얼을 따르고있는 것처럼 보입니다. 조심하십시오. 그 이후로 많은 부분이 변경되었습니다.