Knockout.js自动保存表单

t5fffqht  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(169)

我是一个全新的knockout.js。我有一个html表单,我想自动保存,所以如果用户离开表单,回来之前输入的一切仍然存在。
如果自动保存是不可能的,那么我仍然需要了解如何保存一个表格。
有没有一个好的例子或教程开始?

yyyllmsg

yyyllmsg1#

.....那么我仍然需要了解如何保存表单。
当用户提交表单时,html表单中的字段将保存在服务器上。例如:

<form action="place the server path where you want to send the form data" method="post">
     Username: <input type="text" name="user">
     <input type="submit" value="Submit">
</form>

在上面的表单中,当用户按下提交按钮时,表单中的所有输入字段都将发送到服务器。您应该在表单标记的action属性中提到您要发送数据的路径。更多信息check this
......因此,如果用户离开表单并返回,则之前输入的所有内容仍将保留。
这里我假设用户没有点击提交按钮就离开了表单。所以在这种情况下,你可以把表单数据保存在浏览器的内存中。为此,你可以用途:
1). LocalStorage [来自Html5 Web存储]
2). Store api from amplifyjs [插件模块]

qyswt5oh

qyswt5oh2#

AutoSave依赖于一个isDirty Flag,它在KnockoutJS中的实现会自动将所需的Dirty Filed保存到服务器并更新为clean。rniemeyer在他的网站上解释了整个实现。它在这里被更新,因为它对我的项目很有帮助,所以阅读到这个问题的其他人知道在哪里可以得到完整的答案。
http://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html
为了以防万一,如果链接中断,这里是必要的代码。
这是您的HTML。

<style>
  li { padding: 2px; margin: 2px; }
  input { width: 75px; }
  .dirty { border: solid yellow 2px; }
</style>

<ul data-bind="foreach: items">
  <li data-bind="css: { dirty: dirtyFlag.isDirty }">
    <span data-bind="text: id"></span>
    <input data-bind="value: name" />
    <button data-bind="click: dirtyFlag.reset">Reset</button>
  </li>
</ul>
<button data-bind="enable: isDirty, click: save">Save</button>
<hr />
<h3>Just Dirty Items</h3>
<div data-bind="text: ko.toJSON(dirtyItems)"></div>

这是您的javascript

<script src="http://knockoutjs.com/downloads/knockout-2.2.0.js"></script>
<script>
ko.oneTimeDirtyFlag = function (root) {
   var _initialized;

   //one-time dirty flag that gives up its dependencies on first change
   var result = ko.computed(function () {
       if (!_initialized) {
           //just for subscriptions
           ko.toJS(root);

           //next time return true and avoid ko.toJS
           _initialized = true;

           //on initialization this flag is not dirty
           return false;
       }

       //on subsequent changes, flag is now dirty
       return true;
   });

   return result;
};

ko.dirtyFlag = function(root, isInitiallyDirty) {
    var result = function() {},
        _initialState = ko.observable(ko.toJSON(root)),
        _isInitiallyDirty = ko.observable(isInitiallyDirty);

    result.isDirty = ko.computed(function() {
        return _isInitiallyDirty() || _initialState() !== ko.toJSON(root);
    });

    result.reset = function() {
        _initialState(ko.toJSON(root));
        _isInitiallyDirty(false);
    };

    return result;
};

function Item(id, name) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
    this.dirtyFlag = new ko.dirtyFlag(this);
}

var ViewModel = function(items) {
    this.items = ko.observableArray([
        new Item(1, "one"),
        new Item(2, "two"),
        new Item(3, "three")
    ]);

    this.save = function() {
        alert("Sending changes to server: " + ko.toJSON(this.dirtyItems));  
    };

    this.dirtyItems = ko.computed(function() {
        return ko.utils.arrayFilter(this.items(), function(item) {
            return item.dirtyFlag.isDirty();
        });
    }, this);

    this.isDirty = ko.computed(function() {
        return this.dirtyItems().length > 0;
    }, this);
};

ko.applyBindings(new ViewModel());

</script>

这就是它的来源http://jsfiddle.net/rniemeyer/dtpfv/

相关问题