淘汰剑道图 - 删除并添加系列

Question

我的项目是MVC 5，我正在使用以下内容来生成具有多个系列的图表：

.HTML：

<button data-bind="click: addItem">Add</button>
<button data-bind="click: removeItem">Remove</button>
<div data-bind="kendoChart2: { title: { text: 'Graph Sample' }, 
series: seriesConfig,tooltip: {visible: true,template: '#= series.name #: #= value #'} , seriesDefaults: {
type: 'line',style: 'smooth'}}"> </div>

爪哇语

var MainViewModel = function () {
var self = this;
this.Systolic = ko.observableArray([]);
this.Diastolic = ko.observableArray([]);
this.HeartRate= ko.observableArray([]);
$.ajax({
type: "GET",
url: '/Charts/GetChart',
contentType: "application/json; charset=utf-8",
async: false,
cache: false,
dataType: "json",
success: function (result) {
//Diastolic
if (result && result.Systolic.length > 0) {
for (var i = 0; i < result.Systolic.length; i++) {
self.Systolic.push(result.Systolic[i].Systolic);
}
};
....
},
error: function (err) {
alert(err.status + " : " + err.statusText);
}});
this.seriesConfig = ko.observableArray([
{name: "Systolic", data: this.Systolic()},
{name: "Diastolic",data: this.Diastolic()}]);
this.addItem = function() {
this.seriesConfig.push({ name: "Heart Rate", data: this.HeartRate() });
};
this.removeItem = function() {
this.seriesConfig.remove({ name: "Diastolic", data: this.Diastolic() });
};
}.bind(this);
ko.kendo.bindingFactory.createBinding(
{
name: "kendoChart",
bindingName: "kendoChart2",
watch: {
data: function(value) {
ko.kendo.setDataSource(this, value);
},
series: function(value) {
this._sourceSeries = value;
this.refresh();
this.redraw();}            
}
});
window.viewModel = new MainViewModel();
ko.applyBindings(window.viewModel);

图表效果很好，但是无法添加或删除系列？

注意：addItem 有效，我得到新系列的值：

series: function (value) {
alert(value[2].name);
this.seriesConfig = value;
this.refresh();
this.redraw();
} 

我还尝试加载所有系列，然后使用以下隐藏系列：

$("#kendoChart").getKendoChart().options.series[1].visible = false;
$("#kendoChart").getKendoChart().redraw();

不起作用，我认为图表名称没有注册。

Answer 1

我不熟悉淘汰剑道，只是一般的敲击，所以如果修复下面描述的明显问题不起作用，您可能需要刷新绑定。但是，查看此示例不需要这样做，因此很可能您被一个简单的事实所吸引，即数组的删除执行简单的==比较，并且无法在数组中找到相等的对象。

这是一个简化的示例(虽然您可能已经知道，但以防万一(：

var a="abc";
var b="abc";
var aa = [1,2,3,"a","b","c"];
var data1 = {name: a, data: aa};
var data2 = {name: b, data: aa};

现在，比较a==b回报true，显然data插槽是相同的，但是data1==data2false。那是因为它是一个不同的对象。

因此，在 removeItem 的示例中，您创建并传递了一个要删除的新对象，而不是数组中的对象，因此==比较失败并且不会删除任何内容，因为新创建的对象不在可观察数组中。

我建议仅比较名称，类似于item.age < 18KNOCKOUT.js文档中关于可观察数组的比较：

this.seriesConfig.remove( function (item) { return item.name == "Diastolic"; } ) 

我相信，这应该可以解决问题。