KnockoutJS 動態創建 observable 屬性：循環綁定數組字段

需求

運行時根據數組字段名動態在 ViewModel 上創建 ko.observable() 屬性。

實現代碼

function ViewModel(fields) {
    var self = this;
    fields.forEach(function(name) {
        // 動態添加 observable 屬性
        self[name] = ko.observable('');
    });
    
    // 示例：根據後端返回的字段列表構建
    // fields = ['username', 'email', 'phone'];
}
ko.applyBindings(new ViewModel(['username', 'email', 'phone']));

進階：映射插件自動轉換

使用 knockout.mapping 插件，直接將 JSON 對象映射為 observable 樹：

var data = { username: 'Tom', email: 'tom@example.com' };
var vm = ko.mapping.fromJS(data);
// vm.username() === 'Tom'
// vm.username('Jerry')  // 自動觸發 UI 更新

注意事項

• 動態添加屬性後，若需在 UI 綁定，確保元素已存在或使用 ko.applyBindingsToNode。
• 屬性名不能包含特殊字符（如連字符），否則需用 self['field-name'] 訪問。