0

问题

我有一个表格，分为五个不同的部分。找到下面的图片。当一个人来到这个页面时，我将他/她直接引导到摘要阶段，其中预先填充的数据运行良好。问题出在哪里，用户可以通过单击上一个按钮来编辑此表单。在用户更改之前阶段的值并返回摘要阶段后，它仍然向他们显示来自预填充数据的默认信息，但是当用户提交表单时，它会使用新的编辑数据提交正确的信息。

有什么办法可以刷新或重新加载它？我正在使用下面的代码来显示此摘要。

代码

//Button to reach the summary stage    
<button type="button" class="next" id="summary" onclick="loadnext(4,5);"><img src="images/next.jpg" alt="" /> </button>


//Display
<tr>
    <td>Team Name</td>
    <td id='t_name_SUM'></td>
</tr>
<tr>
    <td>Team Visibility</td>
    <td id='t_visibility_SUM'></td>
</tr>
4

1 回答 1

2

为了更好地支持我的评论，我正在写这个答案。

您需要做的是提供一种逐步收集数据的机制。将 HTML 复制到其他元素中并不是一种非常灵活的方法。

我创建了一个jsfiddle 来演示这个想法。它远非完美，但在这个阶段它可以工作而不会使事情变得复杂。

基本思想是有一个对象来控制用户需要处理的视图（步骤）的流程。每个视图都有一个与之关联的控制器来处理数据。

观点。

<div id="step1" class="view">
    <h3>Step #1</h3>
    <input type="text" name="name" value="" />
</div>

<div id="step2" class="view">
    <h3>Step #2</h3>
    <input type="text" name="title" value="" />
</div>

<div id="step3" class="view">
    <h3>Step #3</h3>
    <input type="text" name="message" value="" />
</div>

控制流程的对象（仅显示最相关的部分）。

var flow = {
    ...
    settings:{}, // settings to save
    routes: [
        {controller:Step1Ctrl, element:'#step1'},
        {controller:Step2Ctrl, element:'#step2'},
        {controller:Step3Ctrl, element:'#step3'} 
    ],

    ...

    show: function (index) {
        var route = this.routes[index];

        if (this.currentController) {
            this.currentController.commit();
        }

        this.index = index;
        this.currentController = new route.controller(
            this.settings, 
            route.element
        );
    }
};

每次显示新视图时，当前控制器都会提交更改settings并为当前视图创建一个新控制器。

一个简单的控制器可以如下所示。

function Step1Ctrl(settings, element) {

    var $e = $(element).find('input[name="name"]');
    $e.val(settings.name);  //set the initial value

    this.commit = function () {
        settings.name = $e.val(); //save
    };
}

由于现在每个控制器都提交了更改，settings因此可以轻松地以您喜欢的任何方式表示该数据。小提琴只是提醒收集的数据，但您可以轻松创建另一个视图和另一个控制器来显示这些设置。

此外，因为每个控制器都可以访问设置，所以它可以对已经存在的值进行操作，或者检查设置组合是否可能。

于 2013-05-23T12:06:54.873 回答