Javascript AJAX编辑的网页。如何获取初始数据？

我有一个表格数据的网页。现在它使用Knockout.js绑定

当页面加载时，我调用AJAX来获取数据和绑定。基本上，页面首先显示，然后用户得到“加载…”ajax消息和数据。这很好，因为页面加载速度很快，但浏览器必须对服务器进行两次调用（一次调用页面，另一次调用数据）

如果用户想要刷新数据，它也可以以同样的方式工作

我想知道如何将ViewModel数据与页面一起加载？有什么办法可以避免双重的服务器访问？我希望在初始页面加载中包含JSON，然后使用它并使用AJAX刷新它

编辑：

我让它工作了，不确定我的工作方式是否有问题：

HTML:

在击倒方面很简单，我只需要取出字符串，转换成JSON并使用它

// Page comes with preloaded data. Let's set VM properties
        var initialData = $.parseJSON($("#initialData").text());
        vm.tripData(ko.utils.arrayMap(initialData.Shipments, function (i) { return new shipment(i); }));

---

稍后，当用户点击刷新时，他们通过AJAX调用获得相同的数据。这样做有什么缺点吗？显然，View source提供了大量JSON“东西”。我仍然认为，与完全Ajax加载相比，页面更紧凑，第一次加载速度更快。

您没有指定正在使用的服务器端技术，但您至少用

asp.net

标记了这个问题。这是我在ASP.NET MVC中使用的模式，因此如果您使用的是Web表单，则可能需要对其进行调整

var modelData = @Html.Raw(Json.Encode(Model));

var MyViewModel = function (data) {
    var model = ko.mapping.fromJS(data);

    // any additional observables, computeds, methods, etc., i.e.
    // model.SomethingNotOnModel = ko.computed();

    return model;
};

var viewModel = MyViewModel(modelData);
ko.applyBindings(viewModel);

Knockout的映射插件将自动为提供给它的数据对象上存在的任何属性创建可观察对象，因此您不需要手动指定这些属性，除非您需要更改它们

更新

根据@Rich的评论，我觉得我应该更清楚地展示一下你应该如何使用它：

在页面中

<script>
    $(document).ready(function () {    
        var modelData = @Html.Raw(Json.Encode(Model));
        MyApp.MyView.Init(modelData);
    });
</script>

---

当然可以，但使用ajax的要点通常是页面不支持数据。你可以先加载页面，然后再加载数据，而不是一开始就等着加载。当你看到空页面和数据迟到的时候，这很烦人。这只是我尝试进行更多优化的第一次加载。这些帖子可能会有所帮助：我对当前的应用程序基本上做了相同的事情——我用JSON序列化数据，并在第一次加载时将其与HTML一起发送。我使用Web表单。已经通过在服务器上编码JSON对其进行了编码（重用我用于WebMethod的相同函数）。我只关心页面上的位置。将编辑主要问题..好吧，在你更新之前，我认为模式仍然适用。其思想是，您本质上是在注入淘汰视图模型的依赖项，以便它从某个数据对象创建自己。如果您只有一个JSON字符串，那么可以将其传递给视图模型，然后使用

ko.mapping.fromJSON（jsonString）

。我发布了我的更新。我的想法是一样的，但我想知道我的方法。我可以从page中隐藏这些数据吗？不，这是你无法避免的部分。JS运行客户端，因此它无法访问没有AJAX的客户端不存在的任何内容。因此，如果你想避免最初的AJAX，你必须将数据转储到页面上的某个地方。好的，我只是想确保我做得正确，没有比这更好/更流畅的了。只是学习我的舞步。谢谢

var modelData = @Html.Raw(Json.Encode(Model));

var MyViewModel = function (data) {
    var model = ko.mapping.fromJS(data);

    // any additional observables, computeds, methods, etc., i.e.
    // model.SomethingNotOnModel = ko.computed();

    return model;
};

var viewModel = MyViewModel(modelData);
ko.applyBindings(viewModel);

<script>
    $(document).ready(function () {    
        var modelData = @Html.Raw(Json.Encode(Model));
        MyApp.MyView.Init(modelData);
    });
</script>

MyApp = MyApp || {};

MyApp.MyView = function () {
    var _init = function (data) {
        var viewModel = MyApp.MyView.MyViewModel(data);
        ko.applyBindings(viewModel);
        // anything else that should happen on page load
    };

    return {
        Init: _init
    };
}();

MyApp.MyView.MyViewModel = function (data) {
    var model = ko.mapping.fromJS(data);

    // any additional observables, computeds, methods, etc., i.e.
    // model.SomethingNotOnModel = ko.computed();

    return model;
};