Knockout checkedValue Связывание не отображается.

Question

Я пытаюсь получить список флажков, которые проверяются на основе двух наблюдаемых символов. Первая имеет несколько программ, а вторая - все записи программ. Оба данных observablearray поступают из базы данных.

В основном я пытаюсь получить список программ, уже назначенных для пользователя, который находится в массиве ProgramIDs, и сравнить его с массивом массива AllPartnerPrograms и показать те, которые соответствуют проверке.

Затем я хочу, чтобы иметь возможность проверить из нового списка и отправить его обратно на сервер, чтобы обновить данные пользователя с помощью нового списка programid.

Я не уверен, почему привязка checkedValue не работает или я не понимаю, как заставить его работать. Я создал fiddle с тем же кодом здесь.

Я предполагаю, что $root.AllPartnerPrograms отобразит отмеченные элементы на основе массива self.ProgramIDs, но этого не произойдет.

Если я помещаю код, как это, он проверяется, но не показывает мне другие записи.

<input type="checkbox" data-bind="checkedValue: ProgramID, checked: ProgramID" />   

Если изменить Еогеасп к <!-- ko foreach: AllPartnerPrograms --> тогда я получаю другие записи, но до сих пор не проверить на основе первого списка.

Что я здесь делаю неправильно?

Мой код

<div id="programs"> 
<!-- ko foreach: ProgramIDs -->     
<input type="checkbox" data-bind="checkedValue: ProgramID, checked: $root.AllPartnerPrograms" />     
<span data-bind="text: ProgramName"></span> 
<!-- /ko --> 

вид Модель

var objPartnerPrograms; 
vmPartnerProgramsModel = function() { 
var self = this; 

self.ProgramIDs = ko.observableArray(
[{ProgramID: 16002,ProgramName: "Program1"}, 
{ProgramID: 16003,ProgramName: "Program2"}, 
{ProgramID: 16005,ProgramName: "Program3"}, 
{ProgramID: 16006,ProgramName: "Program4"}, 
{ProgramID: 16011,ProgramName: "Program5" 
}]); 

self.AllPartnerPrograms = ko.observableArray(
[{ProgramID: 16002,ProgramName: "Program1"}, 
{ProgramID: 16003,ProgramName: "Program2"}, 
{ProgramID: 16005,ProgramName: "Program3"}, 
{ProgramID: 16006,ProgramName: "Program4"}, 
{ProgramID: 16011,ProgramName: "Program5"}, 
{ProgramID: 16102,ProgramName: "Program6"}, 
{ProgramID: 16104,ProgramName: "Program7" 
}]); 
}; 

$(document).ready(function() { 
    objPartnerPrograms = new vmPartnerProgramsModel() 
    ko.applyBindings(objPartnerPrograms, $("#programs")[0]); 
}); 

Answer 1

Ваше мнение модель ProgramIDs свойство должно содержать только идентификаторы выбранных элементов, а не полных элементов:

self.ProgramIDs = ko.observableArray([16002, 16003, 16005, 16006, 16011]); 

Вы также должны связываться с полным списком недвижимости в foreach связывания и использовать ProgramIds для связывания проверил:

<div id="programs"> 
    <!-- ko foreach: AllPartnerPrograms -->  
    <input type="checkbox" data-bind="checkedValue: ProgramID, checked: $root.ProgramIDs" /> 
    <span data-bind="text: ProgramName"></span> 
    <!-- /ko --> 
</div> 

См обновленный jsFiddle.

Answer 2

Ваш неконтролируемый видимый результат в пределах вашего цикла foreach, к нему следует обращаться через $ data.

Говоря это, я бы сохранил только один наблюдаемый список со всеми параметрами. Расширьте эту опцию, чтобы иметь логическое значение, которое поле проверки может работать правильно. Когда вы придете, чтобы сохранить значения обратно в базу данных, вы можете просто пропустить ваш массив и получить те, которые были проверены.

var self = this; 
var Program = function(id, name, isChecked) { 
    return { 
     id: ko.observable(id), 
     name: ko.observable(name), 
     isChecked: ko.observable(isChecked) 
    } 
} 

self.programArray = ko.observableArray([]); 
// populate observable array checking the programs that match in both your lists 
self.programArray.push(new Program(1234, 'name', true)); 

// in page 
<!-- ko foreach: programArray --> 
    <input type="checkbox" data-bind="checked: $data.isChecked" /> 
<!-- /ko --> 

НТНА