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

What is the proper way to reset a modal content?

本文关键字：方法 是什么 模态      更新时间：2023-09-26

所以，我有一个bootstrap模式有三个"步骤"。在.modaldiv里有三个.modal-contentdiv，最后两个是display:none。当用户按下按钮时，我做一些动画来显示下一步。

在这个模态中我有几个输入和类似的东西。所以如果你打开模态，输入东西，关闭，再打开，模态会打开，里面有你之前输入的信息。

为了解决这个问题,我创建了一个内部函数重置所有模态(清洁输入,和战利品的另一个你可以做的事情,例如,你可以点击一个按钮来添加另一个输入字段在重置状态的模态,所以我需要检查div的长度又离开一个),我在想如果有另一个简单的方法来做,如果没有执行函数每次按下按钮打开模态。

我尝试了几件事，比如克隆原始的html，每次你点击按钮，我删除当前的模态html并插入我复制的一个，但它总是有bug，因为一些事件的链接和输入从来没有工作，有些做(我不知道为什么)。

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

这样做的一种方法是在可观察对象中使用子模型对象。然后，您可以在子模型对象上使用with绑定。要重置，你只需创建一个新对象，并将其赋值给可观察对象。

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/

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

考虑以下数据，这是您开始使用的数据:

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);
}

当你调用这个函数时，你的视图模型将被init数据更新，这就像重置一样。

演示

相关文章：