Ember TextField valueBinding với thuộc tính động

Question

Tôi đang cố gắng viết chế độ xem chung để xử lý các trường tùy chỉnh trong ứng dụng của mình, nhưng tôi đang gặp khó khăn trong việc làm việc này. Đây là kịch bản - Tôi có đối tượng fieldDef xác định trường tùy chỉnh và valueObject có một mảng, customFields, có giá trị. Những gì tôi đang cố gắng làm là một cái gì đó như thế này:

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

Rõ ràng đó không làm việc vì nó xử lý fieldDef.name như một chữ. Tôi đã cố gắng overriding lớp TextField, nhưng dường như không thể có được nó để ràng buộc.

Bất kỳ đề xuất nào về cách thực hiện điều này?

Cảm ơn, Scott

Answer 1

Ember không thể liên kết với một chỉ số mảng, vì vậy bạn sẽ phải làm việc xung quanh nó. Một giải pháp là giới hạn bản thân bạn thành ràng buộc một chiều, trong đó trường văn bản của bạn cập nhật giá trị băm. Nếu bạn dự định gửi biểu mẫu sau khi người dùng nhấn một nút, điều này sẽ thực hiện thủ thuật.

Xác định một mảng của id trường trong điều khiển của bạn và một hash cho các giá trị của họ để đi vào.

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

Bây giờ mở rộng Ember.TextField để cập nhật giá trị băm của bạn khi một trường text thay đổi. Bạn sẽ cần phải vượt qua từng trường hợp fieldId và tham chiếu đến mã băm values từ trình điều khiển của bạn.

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

Mẫu đơn giản.

{{#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 người trả lời tuyệt vời. Chỉ trong trường hợp bất cứ ai quan tâm đến nó hoạt động tuyệt vời mở rộng lựa chọn quá:

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

Gọi nó như là một thành phần bình thường (components/dynamic-select.js)

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

Answer 3

Bạn có thể liên kết các giá trị đầu vào với các phím năng động (biến) của đối tượng với trợ giúp của mut trợ giúp ngay bây giờ.

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

Bạn có thể truy cập vào nó như thế này,

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

Chúng ta có thể ràng buộc quan trọng trong helper đầu vào như thế này,

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

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