javascript - 单击按钮时 Knockout.js 更新 ViewModel

Question

嗯，这不是最好的情况描述...无论如何，我正在尝试更新我的 ViewModel，但它不起作用。默认情况下，我从 Controller 函数获取数据并通过单击按钮 - 从同一 Controller 中的另一个函数获取数据，但 ViewModel 仅包含在第一次 ViewModel 初始化后收到的数据。

<script>
     function viewModel () {
        var self = this;
        self.currentPage = ko.observable();
        self.pageSize = ko.observable(10);
        self.currentPageIndex = ko.observable(0);
        self.salesdata = ko.observableArray();
        self.newdata = ko.observable();
        self.currentPage = ko.computed(function () {
            var pagesize = parseInt(self.pageSize(), 10),
            startIndex = pagesize * self.currentPageIndex(),
            endIndex = startIndex + pagesize;
            return self.salesdata.slice(startIndex, endIndex);
        });
        self.nextPage = function () {
            if (((self.currentPageIndex() + 1) * self.pageSize()) < self.salesdata().length) {
                self.currentPageIndex(self.currentPageIndex() + 1);
            }
            else {
                self.currentPageIndex(0);
            }
        }
        self.previousPage = function () {
            if (self.currentPageIndex() > 0) {
                self.currentPageIndex(self.currentPageIndex() - 1);
            }
            else {
                self.currentPageIndex((Math.ceil(self.salesdata().length / self.pageSize())) - 1);
            }
        }
        //Here I'm trying to update ViewModel
        self.request = function (uri) {
            $.ajax({
                url: uri,
                contentType: 'application/json',
                data: [],
                type: 'GET',
                cache: false,
            success: function (data) {
                ko.mapping.fromJS(data.$values, {}, self.salesdata);
            }
            });
        }
    }
    $(document).ready(function () {
        $.ajax({
            url: "/api/sales",
            type: "GET",
            cache: false,
        }).done(function (data) {
            var vm = new viewModel();
            vm.salesdata(data.$values);
            ko.applyBindings(vm);
        }).error(function (xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");
            alert(err.Message);
        });
        //Here i'm calling for ViewModel update
        $(".btn-default").click(function () {
            days = $(this).val();
            var uri = "/api/sales?days=" + days;     
            new viewModel().request(uri);
        });
    });
</script>

更新。 我更改了获取新数据的代码块，如下所示:

self.request = function (uri) {
                $.getJSON(uri, function (data) {
                    ko.mapping.fromJS(data.$values, {}, viewModel);
                });
            }

不幸的是，这也不起作用。这里没有任何 JS 错误， Controller 返回更新数据的适当部分。

Answer 1

我对所有这些都不熟悉，但如果我正确阅读了您的代码，那么您是在 View 模型的新实例上调用请求函数，而不是绑定(bind)到 html 文档的实例。您需要在初始 get 调用完成后对您创建的 View 模型进行请求调用。

更新: 抱歉，我应该更具体地说明我所指的代码。在代码块的末尾，您有以下代码:

    $(".btn-default").click(function () {
        days = $(this).val();
        var uri = "/api/sales?days=" + days;     
        new viewModel().request(uri);
    });

在这段代码中，似乎每次单击默认按钮时，都会创建一个新的 View 模型，并在该 View 模型上调用请求函数。

在定义加载销售数据后发生的事情的文档就绪函数中，您有以下代码，它创建了 html 文档实际绑定(bind)到的 View 模型:

    var vm = new viewModel();
    vm.salesdata(data.$values);
    ko.applyBindings(vm);

在这个 View 模型上没有任何东西调用请求函数。我想知道您是否真正想要以某种方式将此 View 模型中的请求函数绑定(bind)到默认按钮。