在范围之外的ajax成功上调用knockout模型函数

时间:2013-09-19 11:00:24

标签: javascript function jquery knockout.js

我有这样的模型

function DetailsViewModel() {
    var self = this;
    self.Day = ko.observable();
    self.DateNumber = ko.observable();
    self.Details = ko.observableArray([]);

    self.LoadData = function () {

        var data = { date: '2013-09-18' }
        var url = "php/abc.php"
        var callback = self.Result();

        ajax(url , data , self.Result , type );

        /*
        $.ajax({
            url: "/api/Timesheet/DayDetailResult",
            async: false,
            type: "GET",
            data: ko.toJSON(data),
            dataType: 'JSON',
            success: function (details) {
                self.DateNumber(details.DateNumber);
                self.Day(details.Day);
                self.Details(details.Details);
            }
        });
        */
    };

    self.AddDayDetails = function () {
        window.location.href = '/Home/AddTimeSheetEntry';
    }

    self.Result = function (details) {
        self.DateNumber(details.DateNumber);
        self.Day(details.Day);
        self.Details(details.Details);            
    }

    self.LoadData();
}

这是ajax功能

function ajax(url , data , callback , type ) {

    var type = (type === undefined) ? "GET" : type;
    $.ajax({
        url: url,
        async: false,
        type: type,
        data: ko.toJSON(data),
        dataType: 'JSON',
        success: callback(data)
    });
}   

问题是,当我在self.LoadData函数中取消注释ajax请求时,一切正常。但我想在整个应用程序中使用全局ajax函数。我正在定义self.Result需要从ajax成功获取数据,并且应该从ajax成功调用。我怎样才能做到这一点。当我运行我的代码时,我收到此错误

`details is undefined`

我认为这里应该做些什么来让它工作,但我不知道如何。

ajax(url , data , self.Result , type );

请帮忙。我不是Javascript专家。

2 个答案:

答案 0 :(得分:1)

你有两个问题:

  • 你有一个额外的行var callback = self.Result();执行你的Result函数,没有任何抛出异常的参数:details is undefined所以删除这个错误的行。

  • 您的主要问题在于success: callback(data)行,因为这会立即使用提供的data值执行回调,并将其返回值分配给success属性undefined 1}}。

    您想要的是直接传递callback参考号:

    $.ajax({
        url: url,
        async: false,
        type: type,
        data: ko.toJSON(data),
        dataType: 'JSON',
        success: callback
    });
    

答案 1 :(得分:0)

总之,这是这个问题的正确答案

function DetailsViewModel() {
    var self = this;
    self.Day            =   ko.observable();
    self.DateNumber     =   ko.observable();
    self.Details        =   ko.observableArray([]);
    self.SelectedJob    =   ko.observable();

    self.LoadData = function () {

        var data = { date: '2013-09-18' }
        var url = "php/abc.php"
        var callback = self.Result();

        ajax(url , data , self.Result , type );
    };

    self.Result = function (callbackData) {
        self.DateNumber(callbackData.DateNumber);
        self.Day(callbackData.Day);
        self.Details(callbackData.Details);            
    }

    self.LoadData();
}

正如你在这里看到的那样,我在自定义ajax函数中调用self.Result。 需要在self.Result函数中有一个参数,如下所示 callbackData。

并且在自定义函数中简单地将回调成功。

function ajax(url , data , callback , type ) {

    var type = (type === undefined) ? "GET" : type;
    $.ajax({
        url: url,
        async: false,
        type: type,
        data: ko.toJSON(data),
        dataType: 'JSON',
        success: callback
    });
} 

您可以使用任何功能而不是self.Result。 看一下这个例子

self.getJobs = function () {
    var data = null
    var url = "/api/Timesheet/JobResult"
    var type = 'GET';

    ajax(url, data, self.JobResults, type);
}

self.JobResults = function (jobdata) {
    self.Jobs(jobdata.Details);
}

self.getTasks = function () {
    var data = { JobId: self.SelectedJob() }
    var url = "/api/Timesheet/TaskResult"
    var type = 'GET';

    ajax(url, data, self.TaskResults, type);
}

self.TaskResults = function (taskdata) {
    self.Tasks(taskdata.Details);
} 

注意我为getJobs成功定义了self.JobResults 并且self.getTasks for getTasks成功