草庐IT

javascript - jQuery AJAX "undo helper"

coder 2025-03-20 原文

基于 AJAX 的 UI 中的常见模式是，当用户执行操作时，它会立即反射(reflect)在 UI 中，但在到达 AJAX 响应确认一切正常之前被标记为未完成。这就是例如在谷歌日历中添加一个事件是有效的。当出现错误时，该临时 UI 更改将被还原。

现在，手动执行这样的还原并不太有创意，所以我怀疑 jQuery 中有一些“撤消助手”，它允许保留 UI 元素的状态，然后恢复它 - 一种属性堆栈或类似的东西那。这甚至与 AJAX 没有任何关系。

有这样的东西吗？

最佳答案

在这种情况下，我总是发现状态机是可行的方法。设计您的页面/JavaScript，以便在任何时间点您可以指定一组输入，并且您将始终在整个页面上获得相同的输出。这种方法的好处是您不知道如何您到达程序中的位置，您只需要知道什么数据导致了当前状态。

对于您的情况，您可以创建一个描述您的状态的基本对象:

var state = { user: 'Tomasz', ajaxSent: false, otherState: 123 };

function updateFromState(state){
    // Set all dependent UI visibilities, etc. based on state object
}

然后，在您进行任何更改之前，将您当前的状态推送到一个数组中，以便您可以在需要时还原:

var stateList = [];
stateList.push({ user: 'Tomasz', ajaxSent: false, otherState: 123 });

// Do something that changes your state
var newState =  {user: 'Tomasz', ajaxSent: true, otherState: 123 };
updateFromState(newState);

// Now, if you need to revert
var previousState = stateList.pop();
updateFromState(previousState);

这种方法的缺点是您实际上并没有“消除”您可能已经调用的任何副作用。例如，如果您创建了一个修改服务器数据的 AJAX 帖子，您将必须了解如何“撤消”该 AJAX 帖子。这不仅仅是改变页面的本地状态。但是，如果您不需要撤消服务器端效果，而只是能够准确反射(reflect)页面的正确状态，这可能适合您。

如果我正在做这样的事情，我可能会使用以下内容开始:

var StateHelper = function(){
    var stateList = [];
    var callbacks = [];

    this.onChange = function(callback){
        callbacks.push(callback);
    };

    this.set = function(opts){
        stateList.push(opts);
        apply(opts);
    };

    this.undo = function(){
        if(stateList.length <= 1){
            return; // nothing to undo
        }

        // To undo, we go back 2, since top of stack is current
        stateList.pop();
        var last = stateList[stateList.length - 1];
        apply(last);
    };

    var apply = function(opts){
        var length = callbacks.length;
        for(var i = 0; i < length; i++){
            callbacks[i](opts);
        }
    };
};

然后，如果我的页面看起来像这样:

<div id='title' style='text-decoration: underline;'>some title</div>
<div id='state1' class='clickable'>click to set state2 (title = 'second')</div>
<div id='state2' class='clickable'>click to set state3  (title = 'third')</div>
<br/>
<div id='undo' class='clickable'>undo</div>

我可能会像这样使用上面的 StateHelper(注意我使用了一点 jQuery):

// A function that should be called when state changes
var updateTitle = function(opts){
    // Update the pages title based on state
    console.log('title updating');
    $('#title').text(opts.title);
};

var myState = new StateHelper();
myState.onChange(updateTitle);  // hook the state change event

// some example states
var state2 = { title: 'second' };
var state3 = { title: 'third' };

// Just some click handlers
$(document).ready(function(){
    $('#state1').click(function(){
        myState.set(state2);
    });

    $('#state2').click(function(){
        myState.set(state3);
    });

    $('#undo').click(function(){
        myState.undo();
    });

    // Set initial state
    myState.set({title: 'some title'});
});

有关实际示例，请参阅:http://jsfiddle.net/belorion/Hywtc/

关于javascript - jQuery AJAX "undo helper"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4215987/

javascriptamp39statefunctionjquery

有关javascript - jQuery AJAX "undo helper"的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  4. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  5. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  6. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  7. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  8. ruby - RVM "ERROR: Unable to checkout branch ."单用户 - 2

    我在新的Debian6VirtualBoxVM上安装RVM时遇到问题。我已经安装了所有需要的包并使用下载了安装脚本(curl-shttps://rvm.beginrescueend.com/install/rvm)>rvm，但以单个用户身份运行时bashrvm我收到以下错误消息:ERROR:Unabletocheckoutbranch.安装在这里停止，并且(据我所知)没有安装RVM的任何文件。如果我以root身份运行脚本(对于多用户安装)，我会收到另一条消息:Successfullycheckedoutbranch''安装程序继续并指示成功，但未添加.rvm目录，甚至在修改我的.bas

  9. ruby - 如何关闭 ruby​​ gem "Spreadsheet?"中的文件 - 2

    下面的代码在我第一次运行它时就可以正常工作:require'rubygems'require'spreadsheet'book=Spreadsheet.open'/Users/me/myruby/Mywks.xls'sheet=book.worksheet0row=sheet.row(1)putsrow[1]book.write'/Users/me/myruby/Mywks.xls'当我再次运行它时，我会收到更多消息，例如:/Library/Ruby/Gems/1.8/gems/spreadsheet-0.6.5.9/lib/spreadsheet/excel/reader.rb:11

  10. ruby - Ruby 语法糖有 "rules"吗？ - 2

    我正在学习Ruby的基础知识(刚刚开始)，我遇到了Hash.[]method.它被引入a=["foo",1,"bar",2]=>["foo",1,"bar",2]Hash[*a]=>{"foo"=>1,"bar"=>2}稍加思索，我发现Hash[*a]等同于Hash.[](*a)或Hash.[]*一个。我的问题是为什么会这样。是什么让您将*a放在方括号内，是否有某种规则可以在何时何地使用“it”？编辑:我的措辞似乎造成了一些困惑。我不是在问数组扩展。我明白了。我的问题基本上是:如果[]是方法名称，为什么可以将参数放在括号内？这看起来几乎——但不完全是——就像说如果你有一个方法Foo.d

随机推荐