Question

尝试在淘汰赛中将项目添加到observableArray。虽然该项目肯定已添加到视图模型中，但它未添加到视图中。似乎与使用ko.mapping.fromJS有关。重新解决了我面临的问题：

function ViewModel() {
    var vm = {
        props: ko.observableArray(["A", "B"]),
        field: ko.observable(""),
        val: "Some value"
    };

    vm.field.subscribe(function () {
        vm.props.push("C");
    });

    return vm;
}

var myVM = new ViewModel();
myVM = ko.mapping.fromJS(myVM);
ko.applyBindings(myVM, document.getElementById("c"));

HTML：

<div id="c">
  <select data-bind="options: props"></select>
  <input data-bind="value: field">
  <span data-bind="text: val"></span>
</div>

当您在文本框中输入内容时，下拉列表不会更新。

小提琴：https://jsfiddle.net/GarryPas/3dmuLv92/3/

Answer 1

问题在于你的“myVar = ko.mapping”行。以下是将JSON映射到预先存在的viewModel的正确方法：

ko.mapping.fromJS(jsonToBeMapped, observableToMapJsonInto);

知道这一点，用下面的代码替换你的“myVar = ko.mapping”行：

ko.mapping.fromJS(myVM, myVM);

它现在按预期工作，即使它看起来很有趣，因为没有理由将整个视图模型映射到自身。你可以完全摆脱那条线并获得相同的结果。

工作小提琴：https://jsfiddle.net/dw1284/yf8mmk1u/

Answer 2

您不需要在此处使用Mapping，因为您已在模型中定义了可观察变量。映射插件的作用是创建从常规JavaScript对象（或JSON结构）到可观察视图模型的映射。因此，如果您有一个复杂的对象，则不需要为所有数据定义可观察变量。 Mapping插件为您完成工作。但在这里你不需要使用它。

请记住，只要您订阅了一个observable，就需要在回调函数中传递一个参数（newValue），以便从中获取更新的值。https://jsfiddle.net/3dmuLv92/4/

function ViewModel() {
  var vm = {
    props : ko.observableArray(["A","B"]),
    field: ko.observable(""),
    val: "Some value"
  };

  vm.field.subscribe(function(newValue) {

    vm.props.push(newValue);
  });

  return vm;
}

var myVM = new ViewModel();
ko.applyBindings(myVM, document.getElementById("c"));

Knockout observableArray - 添加的项目未在视图中显示

2 个答案: