Привязка не работает при использовании ko.mapping с 2-мя моделями

Question

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

Однако, когда я использую параметры сопоставления, выпадающий список или таблица работают некорректно. Я не смог найти что-либо в Интернете, которое помогает решить эту проблему.

Я создал jsFiddle здесь для получения дополнительной информации:

HTML, заключается в следующем:

<table class="table table-striped table-bordered table-curved"> 
    <tr> 
     <th>Name</th> 
     <th>Team</th> 
    </tr> 
    <!-- ko foreach: History --> 
    <tr> 
    <td data-bind="text: Name"></td> 
    <td data-bind="text: Team1"></td> 
    </tr> 
    <!-- /ko --> 
</table> 

и JS является:

$(function() { 
    var reasons = [ 
    { Id: 1, Reason: "Late", SafeName: "late" }, 
    { Id: 2, Reason: "Road Works", SafeName: "road_works" }, 
    { Id: 3, Reason: "Later", SafeName: "later" }, 
    ] 

    var history = [ 
    { Name: "John", Team: "Team1" }, 
    { Name: "Peter", Team: "Team1" }, 
    { Name: "Simon", Team: "Team2" } 
    ] 

    function GetData(){ 
    return [history, reasons]; 
    } 

    function ReasonModel(data, parent) { 
    var self = this; 
    ko.mapping.fromJS(data, {}, parent.Reasons) 
    } 

    function DelayModel(data, parent) { 
var self = this; 
    ko.mapping.fromJS(data, {}, parent.History) 
    } 

    function ViewModel() { 
    var self = this; 

    var mapping = { 
     reasons: { 
     create: function (options) { 
      return new ReasonModel(options.data, self); 
     } 
     }, 
     history: { 
     create: function (options) { 
      return new DelayModel(options.data, self); 
     } 
     }, 
    } 

    self.History = ko.observableArray([]); 
    self.Reasons = ko.observableArray([]); 
    self.SelectedReason = ko.observable(); 

    self.GetHistory = function(){ 
     GetData().done(function(result){ 
     ko.mapping.fromJS(result, mapping, self); 
     }) 
    } 
    } 
    var vm = new ViewModel(); 
    ko.applyBindings(vm); 
    vm.GetHistory(); 
}); 

http://jsfiddle.net/372221/vg6kf3pw/14/

Может кто-нибудь поможет мне исправить это?

Answer 1

У вас было много ошибок/ошибок в вашей скрипке. Прежде всего, вот working one.

Вот ваши ошибки.

• jsfiddle был неправильно настроен. Чтобы правильно настроить его, выберите библиотеку Knockout 3.4 в настройках Javascript. После этого вам не нужно напрямую ссылаться на файл js. Кроме того, вы вообще не ссылались на плагин сопоставления. Наконец, вам не нужна готовая упаковка документа jQuery, особенно если JQuery даже не упоминается.
• Плагин сопоставления отображает объекты в объекты, которые по умолчанию должны иметь соответствующие имена свойств, которые чувствительны к регистру. Поэтому вы должны предоставить правильный источник от GetData.
• Метод GetData не возвращал объект, похожий на обещание, поэтому нет done callback. В моей версии я использовал некоторые издевательства за это.
• Из-за недействительного HTML ko не удалось обработать виртуальные узлы привязки, поэтому мне нужно было добавить правильную обертку tr вокруг тегов th.
• У вас были неправильные привязки: Team правильный, а не Team1, а в optionsText правильный приемник должен возвращать SafeName (я думаю).

UPDATE

Обновленная скрипка была эти ошибки.

• Несколько ошибочных или неправильных случаев слов. Вы можете увидеть эти основные проблемы при запуске скрипта, когда Dev Tools (F12) открыт. Консоль предоставит вам исключение из привязок ko.
• Вы применили привязки до, вы назвали отображение. Таким образом, это привело к тому, что связанные свойства не были определены в то время, так как они создаются «на лету» плагином для сопоставления (это одна из причин дизайна, например, почему я его не использую). Поэтому сначала вам нужно позвонить GetHistory, затем ko.applyBindings.
• В конструкторе ваших дочерних элементов вы передали, например, parent.DelayHistory в ko.mapping.fromJS в качестве третьего параметра, так что плагин включил эти объекты в observableArray вместо фактического элемента. На самом деле вам даже не нужна ссылка parent в этом случае (если у вас нет других причин в вашем реальном коде).