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

试图在淘汰赛中将项目添加到observableArray。虽然该项目肯定被添加到视图模型中，但它不会被添加到视图中。似乎与使用ko.mapping.fromJS有关。重建我面临的问题就在这里：Knockout observableArray - 添加项目未在视图中显示

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/

来源

2016-09-16 garryp

的问题是你的 “myVar的= ko.mapping” 行。这里是一个JSON映射到一个预先存在的视图模型的正确方法：

ko.mapping.fromJS(jsonToBeMapped, observableToMapJsonInto);

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

ko.mapping.fromJS(myVM, myVM);

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

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

来源

2016-09-16 17:35:25

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

请记住，只要您订阅了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"));

来源

2016-09-16 17:41:20

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

回答

相关问题