我想将视图模型以JSON格式保存在隐藏字段中。一切正常。
但是,当我尝试获取它时,出现错误:
未捕获的错误:无法解析绑定。消息:ReferenceError:selectAll未定义;绑定值:选中:AllCheck,单击:selectAll
提琴手
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; };
}
初始化代码
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>
您正在调用ko.mapping.fromJSON带有错误参数的。
ko.mapping.fromJSON
您的情况下的正确用法如下:
var viewModelDeserialized = ko.mapping.fromJSON(serializedJsonString, {} /* empty options */, viewModel);
演示小提琴。(没有绑定错误)
该ko.mapping.fromJSON方法的用法有些棘手:
您可以使用 一个参数 来调用它:仅提供数据,例如,var viewModel = ko.mapping.fromJSON(data) 在这种情况下,它将返回创建的viewModel
var viewModel = ko.mapping.fromJSON(data)
您可以使用 两个参数 进行调用:
ko.mapping.fromJSON(data, koMappingCreatedViewModel)
var viewModel = ko.mapping.fromJSON(data, options)
ko.mapping.fromJSON(data, options, target)