Дилемма сложного связывания с использованием нокаута

Question

Чтобы быть откровенным, я не уверен, что то, что я пытаюсь сделать, возможно. Тем не менее ...

Базовый сценарий таков: внутри Еогеасп: петли, я рендеринга флажок, метки и раскрывающийся, как это:

<ul data-bind="foreach: $root.ClassDays"> 
<li> 
    <input type="checkbox" data-bind="checkedValue: $data, checked: $root.SCVM.EditingItem().AssignedDates" /> 
    <label data-bind="text: ClassDay"></label> 
    <select data-bind="options: $data.ClassTimes, optionsCaption: 'Select', value: $root.SCVM.EditingItem().AssignedDates().ClassTime"></select> 
</li> 

объект ClassDays является массивом, содержащим 7 AssignedDate объектов, которые выглядят следующим образом:

var AssignedDate = function (day) { 
    this.AssignedId = 0; 
    this.ScheduledClassID = 0; 
    this.ClassDay = ko.observable(day || ""); 
    this.ClassTimes = ko.observableArray(["5:00 PM", "5:30 PM", "6:00 PM", "6:30 PM", "7:00 PM", "7:30 PM", "8:00 PM"]) 
    this.ClassTime = ko.observable(""); 
}; 

ClassDays инициализируются таким образом:

self.ClassDays = [ 
    new AssignedDate("Monday"), 
    new AssignedDate("Tuesday"), 
    new AssignedDate("Wednesday"), 
    new AssignedDate("Thursday"), 
    new AssignedDate("Friday"), 
    new AssignedDate("Saturday"), 
    new AssignedDate("Sunday") 
]; 

Моя цель - зафиксировать значение времени, когда выбран «день». Моя текущая реализация добавляет объект AssignedDate к $root.SCVM.EditingItem().AssignedDates, когда коробка проверяется, но свойство ClassTime никогда не устанавливается.

Edit:

Чтобы уточнить, архитектура моей страницы использует ViewModel с именем SessionsViewModel и А имена ребенка ViewModel \ d ScheduledClassViewModel. Детальная VM называется SCVM. Здесь (в основном) полное lsiting родителя:

function SessionsViewModel(){ 
var self = this; 
var hasErrors, strMessage, strErrMsg; 
self.FailHandler = function (a, b, c) { 
    alert(a.responseText); 
}; 
self.MsgGood = ko.observable(""); 
self.MsgError = ko.observable(""); 
self.PageMode = ko.observable(""); 
self.AddSession = function() { 
    self.SessionId(null); 
    self.CurrentSession(new Session()); 
    self.PageMode("add"); 
    self.DetailsVisible(true); 
    self.ClassesVisible(false); 
}; 
self.SessionInfoGood = function() { 

}; 
self.DoContinue = function() { 
    if (!self.SessionInfoGood()) { 
     self.MsgError(strErrMsg); 
    } 
    else { 
     strErrMsg = ""; 
     self.MsgError(""); 
     self.ClassesVisible(true); 
    } 
}; 
self.DetailsVisible = ko.observable(false); 
self.ClassesVisible = ko.observable(false); 
self.ToggleDisplay = function() { 
    $("#ClassDetails").toggle("blind", {}, 400);   
}; 
self.Sessions = ko.observableArray(); 
self.SessionId = ko.observable(); 
self.SessionId.subscribe(function (newval) { 
    if (newval != null && typeof(newval) != "undefined") 
    { 

    } 
}); 
self.CurrentSession = ko.observable(new Session()); 
self.GetSessions = function() { 

}; 
self.ClassList = ko.observableArray(); 
self.CoachList = ko.observableArray();  
self.SCVM = new ScheduledClassViewModel(self); 
self.ClassDays = ko.observableArray([ 
    new AssignedDate("Monday"), 
    new AssignedDate("Tuesday"), 
    new AssignedDate("Wednesday"), 
    new AssignedDate("Thursday"), 
    new AssignedDate("Friday"), 
    new AssignedDate("Saturday"), 
    new AssignedDate("Sunday") 
]); 
self.AddClass = function() { 
    var sc = new ScheduledClass(new BaseClass()); 
    self.CurrentSession().AssignedClasses.push(sc); 
    self.SCVM.SelectClass(sc, "Add"); 
}; 

}

и это ребенок Виджей Малья:

var ScheduledClassViewModel = function (parent) { 
var self = this; 
self.Mode = ko.observable(""); 
self.ValidationErrorMsg = ko.observable(""); 
self.ScheduledClass = ko.observable(); 
self.EditingItem = ko.observable(new ScheduledClass(new BaseClass())); 
self.ShouldRemove = ko.observable(false); 
self.Validate = function() { 
    var isValid = true; 

    return isValid; 
}; 
self.Cancelling = ko.observable(false); 
self.ClassList = parent.CurrentSession.AssignedClasses; 
self.SelectClass = function (classdata, mode) { 
    self.Cancelling(true); 
    self.Mode(mode); 
    self.ScheduledClass(classdata); 
    var sc = ko.toJS(classdata); 
    self.EditingItem(new ScheduledClass(sc)); 
    self.ShouldRemove(false); 
    self.ValidationErrorMsg(""); 

}; 
self.SaveClass = function() { 
    if (self.ShouldRemove()) 
    { 
     self.ClassList.remove(self.ScheduledClass()) 
    } 
    else { 
     if (self.Validate()) 
     { 
      var selected = self.ScheduledClass(), edited = ko.toJS(self.EditingItem()); 
      selected.Update(edited); 
      self.ClassList.valueHasMutated(); 
      self.Cancelling(false); 
      self.Mode(""); 
     } 

    } 
}; 

};

Цель состоит в том, чтобы получить выбранный ClassDay и ClassTime в коллекции AssignedDates внутри дочернего элемента (identifed as $ root.SCVM.EditingItem(). AssignedDates в html). Хотя решение, предлагаемое supercool, работает, данные заканчиваются в родительском vm, а не дочернем vm. Если это еще не ясно, сообщите мне, и я попробую еще раз.

Answer 1

хорошо, я надеюсь, что это то, что вы ищете, я полагаю. Я надеюсь, что вы можете intrepet моего кода и сделать вам привязки

Посмотреть

<div> 
    <ul data-bind="foreach: ClassDays"> 
     <li> 
      <input type="checkbox" data-bind="checkedValue:$data, checked:AssignedDates" /> 
      <label data-bind="text: ClassDay"></label> 
      <select data-bind="options: $data.ClassTimes, optionsCaption: 'Select', value:ClassTime"></select> 
     </li> 
    </ul> 
</div> 

View Model:

var ViewModel = function() { 
    this.ClassDays = ko.observableArray([ 
    new AssignedDate("Monday"), 
    new AssignedDate("Tuesday"), 
    new AssignedDate("Wednesday"), 
    new AssignedDate("Thursday"), 
    new AssignedDate("Friday"), 
    new AssignedDate("Saturday"), 
    new AssignedDate("Sunday")]); 

} 

var AssignedDate = function (day) { 
    this.ClassDay = ko.observable(day || ""); 
    this.ClassTimes = ko.observableArray(["5:00 PM", "5:30 PM", "6:00 PM", "6:30 PM", "7:00 PM", "7:30 PM", "8:00 PM"]) 
    this.ClassTime = ko.observable(""); 
    this.AssignedDates = ko.observable(false); 
}; 

Работу скрипки here с предварительным просмотром изменений

Если что-то g я пропустил, дайте мне знать.