Использование ko.PureComputed List в качестве источника данных для Kendo ComboBox

Question

Я пытаюсь получить список выбранных заданий ниже, чтобы он был источником данных для kendoComboBox ниже. Тем не менее, значения списка не загружаются, и я не получаю сообщение об ошибке, и поэтому я не уверен, что не так. Возможно ли то, что я пытаюсь? Могу ли я не использовать возвращаемый список ko.pureComputed () в качестве источника данных? Кроме того, идентификатор задания не распознается как поле для 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, который даст вам некоторые базовые c привязки к пользовательскому интерфейсу Kendo из Knockout, например: http://kendo-labs.github.io/knockout-kendo/web/ComboBox.html. Библиотека поддерживает синхронизацию модели элемента управления и представления c друг с другом и избавляет вас от необходимости вручную управлять элементами управления kendo с помощью jQuery.