Ember TextField valoreBinding con proprietà dinamiche

Question

Sto tentando di scrivere una vista generica che gestisca i campi personalizzati nella mia app, ma sto facendo fatica a farlo funzionare. Ecco lo scenario: ho un oggetto fieldDef che definisce i campi personalizzati e uno valueObject che ha un array, customFields, che ha i valori. Quello che sto cercando di fare è qualcosa di simile:

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

Ovviamente questo non funziona perché tratta fieldDef.name come un letterale. Ho provato a sovrascrivere la classe TextField, ma non riesco a farlo legare.

Qualche suggerimento su come realizzare questo?

Grazie, Scott

Answer 1

Ember non può legarsi ad un indice di array, quindi dovrete lavorare intorno ad esso. Una soluzione è limitarsi a un legame unidirezionale, in cui il campo di testo aggiorna l'hash dei valori. Se hai intenzione di inviare il modulo dopo che l'utente preme un pulsante, questo dovrebbe fare il trucco.

Definire una matrice di ID di campo nel controller e un hash per i loro valori di entrare.

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

ora si estendono Ember.TextField per aggiornare il valore hash quando un campo di testo cambia. È necessario passare ogni istanza a fieldId e un riferimento all'hash values dal controller.

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

Il modello è semplice.

{{#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 great answer man. Nel caso in cui qualcuno è interessato funziona benissimo estendere selezionare anche:

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

chiamata come un normale componente (componenti/dinamico-select.js)

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

Answer 3

è possibile associare i valori di ingresso con i tasti dinamici (variabili) di oggetti con l'aiuto di mut. helper ora.

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

È possibile accedere in questo modo,

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

Siamo in grado di legarsi chiave in aiuto di input come questo,

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

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