Observable inside Observable array 跟踪两个元素 KO js

Question

由 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")
        });
    };

如何使 includes observable 数组中的值属性跟踪相关行的无线电选择 + 输入文本值？我试过 Ko.Computed 但问题是在 includes observable 中初始化类型时还没有为相对行定义（类型的默认值为文件）

Answer 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);

Observable inside Observable array 跟踪两个元素 KO js

Observable inside Observable array that track two elements KO js

javascript

knockout.js