Ember - привязка динамического значения

Question

У меня есть простое требование в приложении Ember, которое дает мне возможность.

Я хочу, чтобы принять это:

{{view Ember.TextField valueBinding="fields.firstName"}} 

И сделать поле Имя переменной. Это намерение, но, очевидно, не работает:

{{view Ember.TextField valueBinding="fields.{{fieldName}}"}} 

Я пропустил что-то очевидное? Это похоже на то, что это должно быть очень просто, но я пробовал, вероятно, 10 разных вещей, которые, я думаю, «должны» работать, но никто из них не работает так, как предполагалось.

Answer 1

Вместо того, имея TextField отслеживать переменную непосредственно вам нужно будет иметь TextField отслеживать вычисляемое свойство, и имеют вычисленное свойство отслеживать переменное.

Например, если у вас одновременно firstName и lastName вы можете сделать что-то вроде этого ...

App.IndexController = Ember.Controller.extend({ 

    //These are the fields you would want to edit 
    firstName: 'Tom', 
    lastName: 'Dale', 

    //this is so that we can create a selectbox to choose which field to edit 
    availableFields: ['firstName', 'lastName'], 
    selectedField: 'firstName', 

    //This is the computed property which tracks the selected field 
    //The text input would be bound to this 
    fieldValue: function(key, value){ 
    var selectedField = this.get('selectedField'); 
    if (value) { 
     this.set(selectedField, value); 
    } 
    return this.get(selectedField); 
    }.property('selectedField') 

}); 

Вы можете увидеть рабочий бункер здесь: http://emberjs.jsbin.com/juhika/1/edit?html,js,output

Answer 2

Для динамического связывания значений создают вычисленное свойство на контроллере:

http://emberjs.com/guides/object-model/computed-properties/

Также я считаю, valueBinding осуждается. Используйте значение вместо этого.

Вот еще один подобный вопрос: Ember TextField valueBinding with dynamic property

Answer 3

Вы должны создать вычисляемое свойство, которое будет слушать fieldName и затем вернуть значение.

См. Например jsbin. Это то, что вы пытаетесь сделать? Имейте в виду, что Handlebars довольно «тупые», преднамеренно, и не могут действительно выполнять сложные вычисления так, как вы могли бы использовать из угловой или другой структуры. Контроллер должен все это обработать.

App.IndexController = Ember.Controller.extend({ 

    fields: { 
    field1: 'test', 
    field2: 'test2' 
    }, 

    fieldName: '', 

    myFieldName: function() { 
    var fields = this.get('fields'); 
    var fieldName = this.get('fieldName'); 

    return fields[fieldName]; 

    }.property('fieldName') 

}); 

Затем, на ваш взгляд, привязывается к myFieldName.

{{view Ember.TextField valueBinding=myFieldName}} 

Answer 4

Вы можете связать входные значения с динамические ключи (переменные) с помощью Мут хелперов Теперь

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

{{view Ember.TextField valueBinding=(mut (get fields fieldName))}} 

Проверьте следующий пример,

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

Мы можем связать ключ ввода помощника, как это,

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

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