knockout.js - Knockout.js 自动保存表单

Question

我是 knockout.js 的新手。我有一个要自动保存的 html 表单，因此如果用户离开表单并返回之前输入的所有内容仍然存在。

如果无法自动保存，那么我仍然需要了解如何保存表单。

在某个地方有一个很好的例子或教程可以开始这个吗？

Answer 1

.....那么我仍然需要了解如何保存表单。

当用户提交表单时，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属性中提及要发送数据的路径。有关更多信息，请查看此。

......所以如果用户离开表单并返回之前输入的所有内容仍然存在。

在这里，我假设用户离开表单而不点击提交按钮。因此，在这种情况下，您可以将表单数据保存在浏览器内存中。为此，您可以使用：

1）。LocalStorage [来自 Html5 网络存储]

2）。从 amplifyjs [插件]存储 api

Answer 2

AutoSave 依赖于 isDirty 标志，其在 KnockoutJS 中的实现自动将所需的脏文件保存到服务器并将其更新为干净。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/