无法使用ko.mapping.mapping.fromjson与parse存在视图模型来解析JS错误

Question

我想将视图模型保存在JSON格式的隐藏字段中。所有工作都很好。

但是当我尝试得到它时 - 我会出现错误：

未接收错误：无法解析绑定。 消息：ReferenceError：未定义SelectAll； 绑定值：检查：Allcheck，单击：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;
};        

}

init Code

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);   
}  

序列化模型

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

标记

<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

您正在调用错误参数的ko.mapping.fromJSON。

在您的情况下，正确用法如下：

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

演示小提琴。（没有绑定错误）

ko.mapping.fromJSON方法的使用有点棘手：

• 您可以使用一个参数：仅提供数据，例如var viewModel = ko.mapping.fromJSON(data)在这种情况下，它将返回创建的ViewModel

• 您可以用呼叫两个参数：

  • 如果第二个参数是创建ViewModel的KO映射，则将其视为映射目标ko.mapping.fromJSON(data, koMappingCreatedViewModel)
  • 否则，第二个参数将视为映射选项（在您的情况下发生这种情况）var viewModel = ko.mapping.fromJSON(data, options)

• 您可以使用调用三个参数明确指定数据，映射和目标：ko.mapping.fromJSON(data, options, target)