Question

所以，我有一个bootstrap模式，它有三个＆＃34;步骤＆＃34;。我在.modal-content div中有三个.modal div，最后两个在display:none。当用户按下按钮时，我会做一些动画以进行下一步。

发生的事情是我在这个模态中有几个输入和类似的东西。因此，如果您打开模态，键入内容，关闭并再次打开，模式将打开您之前键入的信息。

为了解决这个问题，我创建了一个函数来重置模态中的所有内容（清理输入，以及你可以做的其他事情的抢劫，例如，你可以点击一个按钮在模态中添加另一个输入字段 - 所以为了重置状态我需要检查div的长度并再次留下一个）并且我想知道是否有另一种简单的方法来执行该操作而不必在每次按下按钮打开模态时执行该功能。

我尝试了几件事，比如克隆原始的html，每次点击按钮，我都删除当前的模态html并插入我复制的那个，但它总是有错误，因为链接和输入的某些事件永远不会起作用，有些做（我不知道为什么）。

我在我的应用程序中使用了jQuery和Knockout.js

Answer 1

您可以使用knockout mapping plugin重置视图模型。

考虑这些数据，即您开始使用的数据：

var initData = {
    firstInput: "First Init Value",
    secondInput: "Second Init Value",
    thirdInput: "Third Init Value",
    showSecond: false
};

首先，使用插件加载所需的数据：ko.mapping.fromJS(initData, {}, this);

然后你可以创建一个如下所示的reset函数：

this.reset = function () {
    ko.mapping.fromJS(initData, this);
}

当您调用此函数时，您的viewmodel将使用init数据进行更新，这将像重置一样。

Demo

Answer 2

执行此操作的一种方法是在observable中使用子模型对象。然后，您可以在子模型对象上使用with binding。要重置，您可以创建一个新对象并将其分配给observable。

var ViewModel = function () {
    var self = this;

    self.subModel = ko.observable(new SubModel());

    self.reset = function () {
        self.subModel(new SubModel());
    };
};

var SubModel = function () {
    var self = this;

    self.field1 = ko.observable();
    self.field2 = ko.observable();
    self.field3 = ko.observable();
    self.field4 = ko.observable();
};


<div data-bind="with: subModel">
    <input type="text" data-bind="field1"/>
    <input type="text" data-bind="field2"/>
    <input type="text" data-bind="field3"/>
    <input type="text" data-bind="field4"/>
</div>
<button data-bind="click: reset">Reset</button>

http://jsfiddle.net/a5X6f/1/

重置模态内容的正确方法是什么？

2 个答案:

Demo