嵌套在 KnockoutJS 中可观察

Nested observable in KnockoutJS

本文关键字：观察 KnockoutJS 嵌套      更新时间：2023-09-26

我有一个自描述的定义如下：

var my_data = {
  types: { typeA: {fieldX: { type: "string"}},
           typeB: {fieldY: { type: "string"}} },
  entries: [{ type: "typeA", fieldX: "foo" },
            { type: "typeB", fieldY: "bar" }]
  };

这个想法是"类型"描述为每个"条目"索引呈现的数据。 此数据用于呈现一个表单，用于通过 RESTful 接口（每种类型描述字段的输入，与条目的字段值绑定）编辑 JSON 数据。

我正在尝试在淘汰赛中设置一个表单，允许编辑"条目"。 我首先创建 HTML，它创建了一个用于确定类型的选择框。 为此，我将类型字典映射到一个数组：

function mapDictionaryToArray(dictionary) {
    var result = [];
    for (var key in dictionary) {
        if (dictionary.hasOwnProperty(key)) {
            result.push({ key: key, value: dictionary[key] });
        }
    }
    return result;
}

然后 KnockoutJS 代码显示条目

<!-- ko foreach: entries -->
            <select data-bind="options: editTestViewModel.types,
                               optionsText: 'key',
                               optionsValue: 'value',
                               value: type,
                               event: { change: editTestViewModel.drawType }"></select>
            <div data-bind="attr: { id: $index() + 'typeFields' }" class="container"></div>
<!-- /ko -->

模型视图：

function EditTestViewModel() {
    var self = this;
    self.entries = ko.observableArray();
    self.types = ko.observable();
    self.setTest = function(test) {
        self.test = test;
        self.types(mapDictionaryToArray(test.types()));
        self.entries(ko.mapping.fromJS(test.entries(), self.stateMapping)());
    };
    self.editTest = function() {
        $('#edit').modal('hide');
        testsViewModel.edit(self.test, {
            entries: self.entries() ,
            types: self.types()
        });
    };
    self.drawType = function(place) {
        home = $('#typeFields');
        home.children().remove();
        for (var field in place.type) {
            tag = $('<div class="input-group">').appendTo(home);
            $('<span class="input-group-addon">' + field + '</span>').appendTo(tag);
            $('<input type="text" class="form-control" data-bind="text: ''test''">').appendTo(tag);
        }
    };
    self.stateMapping = {
        'type': {
            create: function(options) {
                return options.data
            }
        }
    }
}
var editTestViewModel = new EditTestViewModel();
ko.applyBindings(editTestViewModel, $('#edit')[0]);

我遇到的问题是插入的数据似乎没有被KockoutJS处理。 类型选择功能并填充相关字段，但未填充字段值（目前为静态"测试"）。 动态插入的内容是否支持 KnockoutJS，如果是这样，我是否尝试正确绑定它？

感谢大家对OP的评论。

我重写为使用模板。 出于某种原因，我的印象是可观察量不能用于 option.value 存储。 情况似乎并非如此（https://stackoverflow.com/a/27873057/1440598）。 在构造函数中，我现在将类型设置为每个条目的可观察对象。

更改选择会触发模板字段更新：http://fiddle.jshell.net/jhwpn6dy/3/

.HTML：

<div data-bind="text: data.test"></div>
<div data-bind="template: { name: 'entry-template', foreach: entries, as: 'entry' }"></div>
<script type="text/html" id="entry-template">
    <h3 data-bind = "text: entry.type">I'm an entry</h3>
    <select data-bind="options: $root.type_keys,
                       optionsText: 'key',
                       optionsValue: 'key',
                       value: entry.type"></select>
    <div data-bind="template: { name: 'field-template', foreach: $root.fieldList(entry), as: 'field' }"></div>
</script>
<script type="text/html" id="field-template">
    <div class="input-group">
      <span class="input-group-addon" data-bind="text: field"></span>
        <input type="text" class="form-control" data-bind="attr: { 'aria-label': field }, value: entry[field]"/>
    </div>
</script>

.JS：

var data = {
    types: {
        typeA: {
            fieldX: {
                type: "string"
            }
        },
        typeB: {
            fieldY: {
                type: "string"
            }
        }
    },
    entries: [{
        type: "typeA",
        fieldX: "foo"
    }, {
        type: "typeB",
        fieldY: "bar"
    }],
    test: "Hello"
};
function MainViewModel(data_obj) {
    var self = this;
    self.data = data_obj;
    self.type_keys = mapDictionaryToArray(data_obj.types);    
    for (var entry in data_obj.entries) {
        data_obj.entries[entry].type = ko.observable(data_obj.entries[entry].type);
    }
    self.entries = ko.observableArray(data_obj.entries);
    console.log(self.entries());
}
MainViewModel.prototype.fieldList = function (entry) {
    var self = this;
    var keys = [];
    for (var key in self.data.types[entry.type()]) {
        if (entry.hasOwnProperty(key)) {
            keys.push(key);
        }
    }
    <!-- console.log(entry.type); -->
    return keys;
};
function mapDictionaryToArray(dictionary) {
    var result = [];
    for (var key in dictionary) {
        if (dictionary.hasOwnProperty(key)) {
            result.push({ key: key, value: dictionary[key] });
        }
    }
    return result;
}
var dataViewModel = new MainViewModel(data);
ko.applyBindings(dataViewModel);
相关文章：