Wartość TextField wiązania Ember z właściwościami dynamicznymi

Question

Próbuję napisać ogólny widok, który obsługuje niestandardowe pola w mojej aplikacji, ale mam trudności z uruchomieniem tego. Oto scenariusz - mam obiekt fieldDef definiujący pola niestandardowe i valueObject, który ma tablicę, customFields, która ma wartości. Co staram się zrobić coś takiego:

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

Oczywiście, że nie działa, gdyż traktuje fieldDef.name jako dosłowne. Próbowałem przesłonić klasy TextField, ale wydaje się, że nie można go powiązać.

Wszelkie sugestie, jak to osiągnąć?

Dzięki Scott

Answer 1

Ember nie może wiązać się z indeksu tablicy, więc trzeba go obejść. Jednym z rozwiązań jest ograniczenie się do jednokierunkowego wiązania, w którym pole tekstowe aktualizuje wartość mieszania. Jeśli planujesz przesłać formularz po naciśnięciu przez użytkownika przycisku, powinno to wystarczyć.

zdefiniować tablicę identyfikatorów polowych w kontrolerze i hash dla ich wartości, aby przejść.

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

Teraz przedłużyć Ember.TextField zaktualizować wartości hash w momencie zaistnienia zmiany pola tekstowego. Będziesz musiał przekazać każde wystąpienie fieldId i odwołanie do skrótu values ze swojego kontrolera.

App.TextField = Ember.TextField.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') 
}); 

Szablon jest prosty.

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

Here it is fleshed out in a jsfiddle.

Answer 2

@ahmacleod wielki człowiek odpowiedź. Tylko w przypadku gdy ktoś jest zainteresowany to działa świetnie powiększenia wybierz też:

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

nazywają go jako normalny składnik (składniki/dynamic-select.js)

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

Answer 3

można powiązać wartości wejściowe z klawiszami dynamicznymi (zmienne) obiektów za pomocą pomocnika mut.

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

Możesz go tak,

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

Możemy powiązać klucz wejściowego pomocnika jak ta,

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

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