为了子孙后代，这里是代码：

Question

我正在尝试通过以下示例来学习Knockout的一些内容。

我已关注loading and saving data tutorial并阅读Loading and Saving JSON Data上的文档。

使用这些示例中的代码，我似乎无法覆盖JSON文件。我尝试将权限设置为777，以确保不是问题。

关于“成功”，它似乎只是返回文件中的数据。我通过加载HTML文件，手动编辑JSON文件，删除任务和单击“保存”来确认这一点。我在控制台中看到的结果是手动编辑JSON文件的数据。

我现在托管在我的服务器上：index.html，test.json。

为了子孙后代，这里是代码：

HTML

<!doctype html>
<html>
<body>
  <h3>Tasks</h3>

  <form data-bind="submit: addTask">
    Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
    <button type="submit">Add</button>
  </form>

  <ul data-bind="foreach: tasks, visible: tasks().length > 0">
    <li>
      <input type="checkbox" data-bind="checked: isDone" />
      <input data-bind="value: title, disable: isDone" />
      <a href="#" data-bind="click: $parent.removeTask">Delete</a>
    </li> 
  </ul>

  You have <b data-bind="text: incompleteTasks().length">&nbsp;</b> incomplete task(s)
  <span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span>

  <button data-bind="click: save">Save</button>


  <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script>
    function Task(data) {
      this.title = ko.observable(data.title);
      this.isDone = ko.observable(data.isDone);
    }

    function TaskListViewModel() {
      // Data
      var self = this;
      self.tasks = ko.observableArray([]);
      self.newTaskText = ko.observable();
      self.incompleteTasks = ko.computed(function() {
      return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() && !task._destroy });
      });

      // Operations
      self.addTask = function() {
        self.tasks.push(new Task({ title: this.newTaskText() }));
        self.newTaskText("");
      };
      self.removeTask = function(task) { self.tasks.destroy(task) };
      self.save = function() {
        var data = ko.toJSON({ tasks: self.tasks });
        $.post('test.json', data, function(returnedData) {
          console.info(returnedData);
        });

/*
        $.ajax("test.json", {
          data: ko.toJSON({ tasks: self.tasks }),
          type: "post", contentType: "application/json",
          success: function(result) { console.info(result) }
        });
*/
      };

      // Load initial state from server, convert it to Task instances, then populate self.tasks
      $.getJSON("test.json", function(allData) {
      var mappedTasks = $.map(allData, function(item) { return new Task(item) });
      self.tasks(mappedTasks);
      });  
    }

    ko.applyBindings(new TaskListViewModel());
  </script>
</body>
</html>

JSON

[{"title":"Wire the money to Panama","isDone":true},{"title":"Get hair dye, beard trimmer, dark glasses and \"passport\"","isDone":false},{"title":"Book taxi to airport","isDone":false},{"title":"Arrange for someone to look after the cat","isDone":false}]

Answer 1

表单工作正常，它将正确的JSON发布到服务器（您可以在浏览器的开发工具中看到这一点）。但由于它只是服务器上的JSON文件，因此无法通过发布到它来覆盖它。相反，您需要在服务器上创建一个可以发布数据的Web服务端点，然后服务将该文件保存在服务器的文件系统中。

如何使用Knockout将JSON数据保存到文件中？

为了子孙后代，这里是代码：

HTML

JSON

1 个答案: