使用 ko.PureComputed List 作为 Kendo ComboBox 的数据源答案

【问题标题】：Using ko.PureComputed List as DataSource for Kendo ComboBox使用 ko.PureComputed List 作为 Kendo ComboBox 的数据源
【发布时间】：2020-01-30 19:12:56
【问题描述】：

我正在尝试将下面的 selectedJobs 列表作为下面的 kendoComboBox 的数据源。但是，列表的值没有加载，我没有收到错误，所以我不确定出了什么问题。我正在尝试的可能吗？我可以不使用 ko.pureComputed() 返回的列表作为数据源吗？此外，即使 selectedJobs 具有此字段，jobid 也不会被识别为 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
});

【问题讨论】：

标签： knockout.js kendo-datasource kendo-combobox

【解决方案1】：

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

要访问 pureComputed，您需要将其作为函数调用，例如：pageModel.newServiceModel.selectedJobs()。您可以将其作为 dataSource 属性直接传递。
dataValueField 和 dataTextField 选项需要字符串（如“jobid”和“name”）
如果您希望控件对您的 selectedJobs 计算更改做出反应，那么您需要订阅更改并更新控件，例如：

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

这是一个显示您的场景的 sn-p。点击“Fill Selected Account”按钮填充selectedAccount observable。

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 控件。

【讨论】：