mapping

mapping

关注
发信
关注(28)粉丝(399)

无法使用 ko.mapping.fromJSON 解析绑定 js 错误并解析存在视图模型

本文介绍了无法使用 ko.mapping.fromJSON 解析绑定 js 错误并解析存在视图模型的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想将视图模型以 JSON 格式保存在隐藏字段中.一切正常.

但是当我尝试获取它时 - 我得到错误:

未捕获的错误:无法解析绑定.消息:ReferenceError:selectAll 未定义；绑定值:勾选:AllCheck，点击:selectAll

JsFiddler

视图模型

function AppViewModel() {//星期this.AllCheck = ko.observable(false);this.DaysOfWeekResult = ko.observableArray();this.selectAll = 函数 () {如果 (this.AllCheck()) {viewModel.DaysOfWeekResult.removeAll();viewModel.DaysOfWeekResult.push("Mo");viewModel.DaysOfWeekResult.push("Tu");viewModel.DaysOfWeekResult.push("我们");viewModel.DaysOfWeekResult.push("Th");viewModel.DaysOfWeekResult.push("Fr");viewModel.DaysOfWeekResult.push("Sa");viewModel.DaysOfWeekResult.push("Su");}返回真；};this.dayClicked = 函数 () {checkDays();返回真；};

}

初始化代码

var viewModel;$().ready(函数(){viewModel = new AppViewModel();var viewModelDeserialized = ko.mapping.fromJSON(serializedJsonString, viewModel);ko.applyBindings(viewModel);});函数 checkDays() {viewModel.AllCheck(viewModel.DaysOfWeekResult().length == 7);}

序列化模型

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

标记

<input name="AllWeek" id="AllWeek" type="checkbox" value="AllWeek" data-bind="checked: AllCheck, 点击: selectAll"/><label for="AllWeek">所有周</label>
<div class="holder"><跨度><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">我们</label></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>

解决方案

您使用错误的参数调用了 ko.mapping.fromJSON.

您的情况的正确用法如下:

var viewModelDeserialized =ko.mapping.fromJSON(serializedJsonString, {}/* 空选项 */, viewModel);

演示小提琴.(没有绑定错误)

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

  • 你可以用一个参数调用它:只提供数据，例如 var viewModel = ko.mapping.fromJSON(data) 在这种情况下它会返回创建的viewModel

  • 您可以使用两个参数调用:

    • 如果第二个参数是 ko 映射创建的 viewModel 那么它被视为映射目标 ko.mapping.fromJSON(data, koMappingCreatedViewModel)
    • 否则第二个参数被视为映射选项(这在你的情况下发生)var viewModel = ko.mapping.fromJSON(data, options)

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

I want to save view model in the hidden field in JSON format. All work fine.

But when I try to get it - I get error:

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

Serialized model

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

MarkUp

<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>

​

解决方案

You are calling the ko.mapping.fromJSON with wrong arguments.

The correct usage in your case is the following:

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

Demo fiddle. (without the binding error)

The usage of the ko.mapping.fromJSON method is a little bit tricky:

  • you can call it with one argument: providing just the data e.g var viewModel = ko.mapping.fromJSON(data) in this case it will return the created viewModel

  • you can call with two arguments:

    • if the second argument is a ko mapping created viewModel then it is treated as the mapping target ko.mapping.fromJSON(data, koMappingCreatedViewModel)
    • otherwise the second argument is treated as the mapping options (this happens in your case) var viewModel = ko.mapping.fromJSON(data, options)

  • you can call it with three arguments explicitly specifing the data, mapping and target: ko.mapping.fromJSON(data, options, target)

这篇关于无法使用 ko.mapping.fromJSON 解析绑定 js 错误并解析存在视图模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

11-02 00:01
Powered by LMLPHP ©2024 mapping 0.001511