2013-03-01 3 views
6

내 응용 프로그램에서 사용자 정의 필드를 처리하는 일반 뷰를 작성하려고하지만이 작업을 수행하는 데 어려움을 겪고 있습니다. 시나리오는 다음과 같습니다. 사용자 정의 필드를 정의하는 fieldDef 객체와 값이있는 customFields 배열을 가진 valueObject 객체가 있습니다. 이 리터럴로 fieldDef.name을 취급하기 때문에Ember TextField valueBinding with dynamic properties

{{view Ember.TextField valueBinding="valueObject.customFields.[fieldDef.name]"}} 

은 분명히 문제가 해결되지 않습니다 난 할 노력하고있어이 같은 것입니다. TextField 클래스를 재정의하려고 시도했지만 바인딩 할 수없는 것처럼 보입니다.

어떻게해야합니까?

감사합니다, 스콧

답변

6

당신이 그것을 해결해야 할 것이다, 그래서 엠버는, 배열 인덱스에 바인딩 할 수 없습니다. 한 가지 해결책은 텍스트 필드가 값 해시를 업데이트하는 단방향 바인딩으로 제한하는 것입니다. 사용자가 버튼을 누른 후 양식을 제출하려면이 작업을 수행해야합니다. 그 값에 이동하는

는 컨트롤러에서 필드 ID의 배열과 해시를 정의합니다.

App.ApplicationController = Ember.Controller.extend({ 
    fieldIds: ['name', 'email', 'whatever'], 
    fieldValues: {} // {name: 'user', email: '[email protected]', ...} 
}); 

지금 때 텍스트 필드가 변경 당신의 가치 해시를 업데이트 할 Ember.TextField을 확장합니다. 각 인스턴스에 컨트롤러 fieldId과 컨트롤러의 values 해시에 대한 참조를 전달해야합니다.

템플릿이 간단합니다.

{{#each fieldId in fieldIds}} 
    <label>{{fieldId}}</label> 
    {{view App.TextField fieldIdBinding="fieldId" valuesBinding="fieldValues"}} 
    <br/> 
{{/each}} 

Here it is fleshed out in a jsfiddle.

+1

덕분에 -이 매우 유사한 접근 방식을 사용했다. –

+0

valueBinding이 첨부 된 일반 텍스트 필드가 필요하다면 컨트롤러에서 App.TextField = Ember.TextField.extend ({})를 선언해야합니까? –

1

@ahmacleod 대단한 사람. 일반 구성 요소로

import Ember from 'ember'; 

export default Ember.Select.extend({ 
    fieldId: null, 
    values: null, 

    valueChange: function() { 
    var fieldId = this.get('fieldId'); 
    var values = this.get('values'); 
    if (values && fieldId) values[fieldId] = this.get('value'); 
    }.observes('value') 
}); 

전화를 (구성 요소/동적 select.js)

{{#each id in fieldIds}} 
    {{dynamic-select content=fieldIds fieldIdBinding="header"  
    valuesBinding="fields"}} 
{{/each}} 
0

당신은 동적 키 입력 값을 바인딩 할 수 있습니다 : 그냥 경우에 사람이 너무 선택을 확장 위대한 작품을 관심 mut 도우미가있는 객체의 (변수) 당신은 이런 식으로 액세스 할 수 있습니다

https://guides.emberjs.com/v2.6.0/templates/input-helpers/#toc_binding-dynamic-attribute

,

var Object = {}; 
var key = "firstName"; 

우리는이 같은 입력 도우미에서 키를 바인딩 할 수 있습니다,

{{input value=(mut (get Object key))}} 

{{Object.firstName}} // Prints the dynamic value in textbox