跟踪两个元素的Observable数组内部的Observable KO js答案

【问题标题】：Observable inside Observable array that track two elements KO js跟踪两个元素的Observable数组内部的Observable KO js
【发布时间】：2019-06-25 00:09:50
【问题描述】：

3 个单选框和绑定在一起的输入文本的数组，选择单选会动态弹出用户可以添加的文本。我可以填充文本框，但之后无法跟踪两者的变化，因为我需要某种可观察的东西来跟踪两者的变化并给我两者的总值（例如'File: c:\temp\data. cs'

这是我的 HTML

  <!-- ko foreach: includes  -->

                <div class="col-md-3 mt-3 offset-3 ">
                    <input class="col-md-2 " type="radio" value="file:" data-bind="checked: type, attr: { name: name }">File
                    <input class="col-md-2" type="radio" value="dir:" data-bind="checked: type, attr: { name: name }">Dirs
                    <input class="col-md-2" type="radio" value="glob:" data-bind="checked: type, attr: { name: name }">Glob
                </div>

                <div class=" col-md-6 pt-3 ">
                    <input type="text" class="form-control" required data-bind="attr: { name: name } , value: value">
                </div>
                <!-- /ko -->
            </div>

            <div class="col-sm-3 mt-4 mb-4 offset-4" id="firstPath">
                <button type="button" class="form-control btn btn-info ml-3" data-bind="click: addInclude">Add new include line</button>
            </div>

还有我的 JS

self.includes = ko.observableArray([{
        name: "package[][includes][0]",
        type: "file:",
        value: ko.observable()
    }]);


self.addInclude = function () {
 self.includes.push({
            name: `package[][includes][${includeCounter++}]`,
            type: `file`,
            value: ko.observable("file")
        });
    };

如何使包含可观察数组中的 value 属性同时跟踪相关行的单选选择 + 输入文本值？我试过 Ko.Computed 但问题是初始化包含 observable 中的类型时尚未为相关行定义（类型的默认值是文件）

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

类型成员应该是可观察的。所以，通过 subscribe 可以设置每次 type 变化时 value 的值。

function myViewModel() {
  var self = this;

  self.includeCounter = 0;

  self.includes = ko.observableArray([]);

  self.addInclude = function () {
    var type = ko.observable('file:');
    var value = ko.observable('file:');
    type.subscribe((newValue) => {
      value(newValue);
    }, self);

    var item = {
      name: `package[][includes][${self.includeCounter++}]`,
      type: type,
      value: value
    };
    self.includes.push(item);
  };

  self.addInclude();
}

var vm = new myViewModel();
ko.applyBindings(vm);

【讨论】：