Wicket ：通知页面模型是否已更改

Question

问题是这样的；网页包含多个表单元素，用户可以通过保存按钮更改和保存这些元素，也可以放弃更改。

如果用户尝试在不保存更改的情况下离开页面，我需要一个模式窗口来弹出，询问用户是否想在离开页面之前保存更改。

我将如何检查页面/表单模型自首次加载以来是否已被用户更改，以及当单击任何页面链接时如何启动此检查？

任何回复或建议将不胜感激，

谢谢。

Answer 1

我认为您会寻找一种仅使用 javascript 的解决方案，通常打包为 wicket 行为。

实现取决于您使用的 javascript 库，这里是一些原型代码：

var windowdirty = false;
var windowdirtyinitialized = false;

function initwindowdirty(){
    if(windowdirtyinitialized)return;
    windowdirtyinitialized=true;

    Event.observe(window,"beforeunload",function(){
        return (!windowdirty || 
          confirm("You have started entering values, do you really want to leave");
    });
}

function monitor(componentId){
    $(componentId).observe("change",function(){
        windowdirty = true;
    });
}

function undirty(){
    windowdirty=false;
}

我们将其放入名为 DontLeaveBehavior.js 的文件中 这是

使用此 javascript 文件的行为：

public class DontLeaveBehavior extends AbstractBehavior{

    /**
     * {@inheritDoc}
     */
    @Override
    public void renderHead(final IHeaderResponse response){
        response.renderJavascriptReference(new JavascriptResourceReference(DontLeaveBehavior.class,
            "DontLeaveBehavior.js"));
        response.renderOnDomReadyJavascript("initwindowdirty();");
        super.renderHead(response);
    }

    /**
     * {@inheritDoc}
     */
    @Override
    public void bind(final Component component){
        super.bind(component);
        component.setOutputMarkupId(true);
    }

    /**
     * {@inheritDoc}
     */
    @Override
    public void onRendered(final Component component){
        final Response response = RequestCycle.get().getResponse();
        response.write(JavascriptUtils.SCRIPT_OPEN_TAG);
        response.write("monitor('" + component.getMarkupId() + "');");
        response.write(JavascriptUtils.SCRIPT_CLOSE_TAG);
    }

}

现在这是一个自动将此行为分配给其所有子级的页面它们是文本组件：

public class Mypage extends WebPage{

    ...

    private boolean behaviorAssigned = false;

    /**
     * {@inheritDoc}
     */
    @Override
    protected void onBeforeRender(){
        if(!behaviorAssigned){
            behaviorAssigned=true;
            visitChildren(new IVisitor<Component>(){

                @Override
                public Object component(Component component){
                    if(component instanceof AbstractTextComponent<?>){
                        component.add(new DontLeaveBehavior());
                    }
                    return null;
                }
            });
        }
        super.onBeforeRender();
    }

}

最后但并非最不重要的一点是，您的提交按钮当然必须调用 undirty() 。

这些都没有经过测试，因为我现在必须回家与我的妻子和家人共进晚餐。孩子们（当然，这比 wicket 编码更有趣），但它应该可以帮助您入门。

原型特定部分应该可以轻松移植到任何其他 javascript 库，但如果您不知道自己在做什么，则可能不应该在没有库的情况下执行此操作。

---

编辑：

我创建了一个新版本，可与原型和 mootools 以及 将其发布到我的博客上。此版本仅安装到表单组件，并通过 javascript 自动将其自身附加到子组件。

再次编辑：那里，现在链接正在工作