如何在knockout中添加ajax成功(或错误)后的超时消息

How to add a message with timeout after ajax success (or error) in knockout

本文关键字：错误 消息 超时 成功 knockout ajax 添加      更新时间：2023-09-26

如何在knockout.js中添加ajax成功/错误后超时的更新消息?

我可以这样做: 

var ViewModel = {
    var self = this;
    self.message = ko.observable("");
    self.setMessage = function(message, timeout){
        self.message(message);
        setTimeout(function(){
            self.message("");
        }, timeout);
    }
    .....
    $.ajax(url, {
        success: function(obj){
            self.setMessage(obj.message, 2000);
        }
    });
}
HTML: 

<span data-bind='text: message()'></span>

但我有很多ViewModels与ajax调用在我的web应用程序，我希望能够做到这一点在每个ViewModel，我不喜欢复制粘贴我的代码。

我需要帮助扩展knockout，以便我可以添加单个方法并将其导入到所有视图模型

为什么不创建一个由其他虚拟机继承的基本虚拟机，并创建一个其他虚拟机可以调用的ajax函数。

查看这个:

通过原型访问viewModel函数

多亏了ajgiv，我才能够使用上面的链接想出解决方案。如果我是唯一一个在网络应用上工作的人，如果有更少的视图模型，我就会用上面提到的方法。(我有一个knockout.ext.js类，其中包含应用程序所需的所有扩展器)

所以我在knockout.ext.js中添加了这个函数:

ko.timeoutMessageModel = function(initialMessage){
    var self = this;
    self.message = ko.observable(initialMessage);
    self.setTimeout = function(msg, time) {
        self.message(msg);
        setTimeout(function(){
            self.message("");
        }, time);
    }
    return self;
}

在我的ViewModel中:

var message = ko.timeoutMessageModel("initialMessage");
$.ajax(url, 
    success: function(data){
        self.message.setTimeout(data.message, 1000);
    }
);

…等等，在我所有的视图模型中!

HTML: 

<data-bind="text: message.message()"/>
相关文章：