当初始视图模型加载为空时如何初始化 Knockout 视图模型答案

【问题标题】：How to initialize a Knockout viewmodel when initial viewmodel load is empty当初始视图模型加载为空时如何初始化 Knockout 视图模型
【发布时间】：2012-10-10 13:08:45
【问题描述】：

我正在使用 Knockout 来实现课程列表选择工具。我正在使用下面的方法来填充数据（MVC3/Razor），因此当最初填充视图模型时，我使用每个 KO 数组（即 CourseList、ScheduleList）都没有问题。但是，当来自服务器的初始加载返回零行时，这意味着视图模型的“ScheduleList”属性为空，则无法调用任何方法，例如 .push() 或 .removeAll()。大概这意味着 observable 数组从未被创建，因为没有任何东西可以填充它。填充模型后，ScheduleList 属性将填充一个列表。当 MVC 操作将其返回为空时，实例化它的最佳方法是什么？有一个 jsFiddle 似乎可以解决它，但是当我尝试使用“创建”选项时，它会使我的整个模型变为空白。我不确定“create”选项的语法是什么。 jsFiddle 在这里：http://jsfiddle.net/rniemeyer/WQGVC/

// Get the data from the server
var DataFromServer = @Html.Raw(Json.Encode(Model));     

// Data property in viewmodel
var data = {
    "CourseList": DataFromServer.CourseList ,
    "ScheduleList": DataFromServer.ScheduleList
    };

$(function() {
    // Populate Data property
    viewModel.Data = ko.mapping.fromJS(data);   

    // ko.applyBindings(viewModel, mappingOptions);             
    ko.applyBindings(viewModel);
});

当初始页面加载未填充 ScheduleList 时，以下代码将引发错误。如果初始页面加载包含数据，那么您可以调用 .removeAll() 和 .push() 等。

var oneA= 'abc';

// push not working                
this.Data.ScheduleList.push( oneA );

【问题讨论】：

标签： javascript asp.net-mvc knockout.js knockout-mapping-plugin

【解决方案1】：

设置你的映射参数，使它在创建时，你给它一个特定的结构。然后它会为你做更新。

最有可能发生的是您的DataFromServer 实际上根本不包含ScheduleList 属性。因此，当它被映射时，永远不会产生相应的属性。映射器只会将现有属性映射到可观察对象。

您需要在 create 选项中设置视图模型以在未设置任一数组时添加空数组。这样一来，您的视图模型将最终得到相应的可观察数组。

通过确保 CourseList 或 ScheduleList 是一个数组，映射视图模型会将它们映射为 observableArray 对象，因此您的代码将按预期工作。

var DataFromServer = {
    'CourseList': [1,2,3]
    //, 'ScheduleList': []
};

var dataMappingOptions = {
    'create': function (options) {
        var data = options.data;
        data.CourseList = data.CourseList || [];
        data.ScheduleList = data.ScheduleList || [];
        return ko.mapping.fromJS(data);
    }
};

viewModel.Data = ko.mapping.fromJS(DataFromServer, dataMappingOptions);

【讨论】：

谢谢！这正是正在发生的事情，这解决了问题。有趣的是，我看到的大多数 jsFiddles 都作用于属性（数组本身），所以我没有尝试过这个创建回调。 Ray 建议的另一种方法也适用。

【解决方案2】：

var data = {
    CourseList: DataFromServer.CourseList || ko.observableArray([]) ,
    ScheduleList: DataFromServer.ScheduleList  || ko.observableArray([])
    };

【讨论】：