Nie można przeanalizować powiązania błędu js za pomocą polecenia ko.mapping.fromJSON z analizą składową widoku modelu

Question

Chcę zapisać model widoku w ukrytym polu w formacie JSON. Wszystko działa dobrze.

Ale gdy próbuję je zdobyć - otrzymuję błąd:

Uncaught Error: Unable to parse bindings. Message: ReferenceError: selectAll is not defined; Bindings value: checked: AllCheck, click: selectAll

JsFiddler

ViewModel

function AppViewModel() { 

//Week 
this.AllCheck = ko.observable(false); 
this.DaysOfWeekResult = ko.observableArray(); 

this.selectAll = function() { 
    if (this.AllCheck()) { 
     viewModel.DaysOfWeekResult.removeAll(); 

     viewModel.DaysOfWeekResult.push("Mo"); 
     viewModel.DaysOfWeekResult.push("Tu"); 
     viewModel.DaysOfWeekResult.push("We"); 
     viewModel.DaysOfWeekResult.push("Th"); 
     viewModel.DaysOfWeekResult.push("Fr"); 
     viewModel.DaysOfWeekResult.push("Sa"); 
     viewModel.DaysOfWeekResult.push("Su"); 
    } 

    return true; 
}; 

    this.dayClicked = function() { 
    checkDays(); 
    return true; 
};   

}

kod Init

var viewModel;  
$().ready(function(){ 
     viewModel = new AppViewModel(); 
var viewModelDeserialized = ko.mapping.fromJSON(serializedJsonString, viewModel); 

     ko.applyBindings(viewModel); 
}); 


function checkDays() { 
    viewModel.AllCheck(viewModel.DaysOfWeekResult().length == 7); 
} 

Serialized modelu

var serializedJsonString = '"AllCheck":false,"DaysOfWeekResult":[]}'; 

znaczników

<div class="check-block"> 
       <input name="AllWeek" id="AllWeek" type="checkbox" value="AllWeek" data-bind="checked: AllCheck, click: selectAll" /> 
       <label for="AllWeek">All Week</label> 
      </div> 
      <div class="holder"> 
       <span> 
        <input name="Monday" id="Monday" type="checkbox" value="Mo" data-day="true" data-bind="checked: DaysOfWeekResult, click: dayClicked" /> 
        <label for="Monday">Mo</label> 
       </span><span> 
        <input name="Tuesday" id="Tuesday" type="checkbox" value="Tu" data-day="true" data-bind="checked: DaysOfWeekResult, click: dayClicked" /> 
        <label for="Tuesday">Tu</label> 
       </span><span> 
        <input name="Wednesday" id="Wednesday" type="checkbox" value="We" data-day="true" data-bind="checked: DaysOfWeekResult, click: dayClicked" /> 
        <label for="Wednesday">We</label> 
       </span>    
       <span> 
        <input name="Thursday" id="Thursday" type="checkbox" value="Th" data-day="true" data-bind="checked: DaysOfWeekResult, click: dayClicked" /> 
        <label for="Thursday">Th</label> 
       </span><span> 
        <input name="Friday" id="Friday" type="checkbox" value="Fr" data-day="true" data-bind="checked: DaysOfWeekResult, click: dayClicked" /> 
        <label for="Friday">Fr</label> 
       </span><span> 
        <input name="Saturday" id="Saturday" type="checkbox" value="Sa" data-day="true" data-bind="checked: DaysOfWeekResult, click: dayClicked" /> 
        <label for="Saturday">Sa</label> 
       </span><span> 
        <input name="Sunday" id="Sunday" type="checkbox" value="Su" data-day="true" data-bind="checked: DaysOfWeekResult, click: dayClicked" /> 
        <label for="Sunday">Su</label> 
       </span> 
      </div> 

Answer 1

Jesteś wywołaniem ko.mapping.fromJSON z niewłaściwych argumentów.

Prawidłowe zastosowanie w Twoim przypadku jest następująca:

var viewModelDeserialized = 
    ko.mapping.fromJSON(serializedJsonString, {} /* empty options */, viewModel); 

Demo fiddle. (bez błędu wiązania)

Wykorzystanie metody ko.mapping.fromJSON jest trochę trudne:

• można nazwać to za pomocą jeden argument: podając tylko dane, np. var viewModel = ko.mapping.fromJSON(data) w tym przypadku będzie to powrót utworzony ViewModel

• można zadzwonić z dwa argumenty:

  • jeśli drugi argument jest odwzorowaniem ko stworzony ViewModel następnie jest ona traktowana jako cel mapowania ko.mapping.fromJSON(data, koMappingCreatedViewModel)
  • inaczej drugi argument jest traktowany jako opcji mapowania (to dzieje się w Twoim przypadku) var viewModel = ko.mapping.fromJSON(data, options)

• można nazwać to z trzy argumenty wyraźnie specifing danych, mapowanie i cel: ko.mapping.fromJSON(data, options, target)