Using ko.PureComputed List as DataSource for Kendo ComboBox

Question

>我试图让下面的选定作业列表成为下面kendoComboBox的数据源。但是，列表的值没有加载，我没有收到错误，所以我不确定出了什么问题。我正在尝试的可能吗？我可以不使用 ko.pureComputed(( 返回的列表作为数据源吗？此外，即使所选作业具有此字段，作业 id 也不会被识别为 dataValueField 的字段。谢谢！

pageModel.newServiceModel.selectedJobs = ko.pureComputed(function () {
return pageModel.newServiceModel.selectedAccount() ? pageModel.newServiceModel.selectedAccount().jobs : null;
});
var source = new kendo.data.DataSource(pageModel.newServiceModel.selectedJobs);
$("#newServiceJobs").kendoComboBox({
placeholder: "Select One",
filter: "contains",
suggest: true,
change: pageModel.newServiceModel.JobSelectionChange,
dataSource: source,
//dataValueField: jobid,
dataTextField: name
});

Answer 1

以下是修复现有代码的几种方法：

• 要访问 pureComputed，您需要将其调用为如下函数：pageModel.newServiceModel.selectedJobs()。您可以将其作为dataSource属性直接传入。
• dataValueField和dataTextField选项需要字符串(如"jobid"和"name"(
• 如果希望控件对计算selectedJobs更改做出反应，则需要订阅更改并更新控件，如下所示：

pageModel.newServiceModel.selectedJobs.subscribe( function(newData) {
$("#newServiceJobs").data( "kendoComboBox" ).dataSource.data( newData );
});

下面是显示方案的代码段。单击"填写所选帐户"按钮以填充可观察selectedAccount。

const viewModel = {
	selectedAccount: ko.observable(),
clearSelectedAccount() {
	viewModel.selectedAccount( null );
},
fillSelectedAccount() {
viewModel.selectedAccount({
	jobs: [
	{ jobid: "1", name: "one" },
	{ jobid: "2", name: "two" }
	]
	});
}
};
viewModel.selectedJobs = ko.pureComputed(function () {
const account = viewModel.selectedAccount();
return account ? account.jobs : [];
});
ko.applyBindings( viewModel );
$("#newServiceJobs").kendoComboBox({
placeholder: "Select One",
filter: "contains",
suggest: true,
change: null,
dataSource: viewModel.selectedJobs(),
dataValueField: "jobid",
dataTextField: "name"
});
viewModel.selectedJobs.subscribe( newData => {
	$("#newServiceJobs").data( "kendoComboBox" ).dataSource.data( newData );
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://kendo-labs.github.io/knockout-kendo/css/kendo.default.min.css" rel="stylesheet"/>
<link href="https://kendo-labs.github.io/knockout-kendo/css/kendo.common.min.css" rel="stylesheet"/>
<script src="https://kendo-labs.github.io/knockout-kendo/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button data-bind="click: fillSelectedAccount">Fill Selected Account</button>
<button data-bind="click: clearSelectedAccount">Clear Selected Account</button>
<hr/>
<input id="newServiceJobs" />

如果可能的话，另一种选择是查看knockout-kendo，这些将为您提供一些从 Knockout 到 Kendo UI 的基本绑定，例如：http://kendo-labs.github.io/knockout-kendo/web/ComboBox.html。该库负责使控件和视图模型彼此保持同步，并避免您通过 jQuery 手动管理 kendo 控件。