javascript - 使用 Knockout.js 提交后在页面上输出动态表单内容

Question

我需要在其下方的页面上输出表单的内容，并以相同的名称显示。这相当于 document.getElementById() 或 jquery 等价物并获取值。我正在练习我在网上找到的一些样本。下面是代码。如果有人能告诉我如何在水平线下方打印动态表单的详细信息，那就太好了。

function fieldModel() {
  var self = this;
  var noTracker = 0;

  self.myFieldList = ko.observableArray([]);

  self.removeField = function(dynamicField) {
    self.myFieldList.remove(dynamicField);
  }

  self.addField = function() {
    noTracker++;
    self.myFieldList.push({
      label: "First " + noTracker,
      label1: "Second " + noTracker,
      fname: "var" + noTracker,
      lname: "varry" + noTracker,
      label2: "Textarea" + noTracker,
      texting: "newtext" + noTracker
    });
  }

  self.printField = function() {

    alert(self.myFieldList = ko.observableArray([]));

  }

}
ko.applyBindings(fieldModel);

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
}

#container {
  width: 980px;
  margin: 20px auto;
  padding: 15px;
}

#addVar:hover,
.removeVar:hover {
  cursor: pointer;
}

.alignRight {
  text-align: right;
}

.displayHeader {
  margin: auto;
  padding: 5px;
  width: 650px;
}

#action {
  margin-left: 320px;
  border: 4px solid #E3BE8D;
  -moz-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border-radius: 4px;
  background-color: #DAEDE2;
  display: inline-block;
  padding: 5px;
}

.msg {
  margin-left: 320px;
}

input,
textarea {
  padding: 5px;
  font-size: 16px;
}

input:focus,
textarea:focus {
  background-color: #F6F792;
}

.submit {
  text-align: right;
  margin-right: 50px;
}

footer {
  clear: both;
  margin-top: 20px;
  border-top: 1px solid #005;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>


<div id="container">

  <header>
    <h1>Test with Knockout</h1>
  </header>
  <!-- /header -->

  <section id="main">

    <form method="post">

      <div data-bind="foreach: myFieldList">
        <p>
          <label data-bind="text: label"></label>
          <input data-bind="attr: { id: fname, name: fname}"><br/>
          <label data-bind="text: label1"></label>
          <input data-bind="attr: { id: lname, name: lname}"><br/>
          <label data-bind="text: label2"></label><br/>
          <textarea data-bind="attr: { id: texting }"></textarea>
          <span class="removeVar" data-bind="click: removeField">Remove</span>
        </p>
      </div>

      <p>
        <span id="addVar" data-bind="click: addField">Add</span>
      </p>

      <p class="alignRight">
        <input type="submit" value="Submit">
      </p>

      <div data-bind="text: { id: fname, name: fname}"></div>

    </form>

  </section>
  <!-- /main -->

  <footer>
  </footer>
  <!-- /footer -->

</div>
<!--!/#container -->

Answer 1

在我们开始之前，这里有一个实际运行的代码片段版本。您将看到 myFieldList 的内容在表格下方记录。

function fieldModel() {
  var self = this;
  var noTracker = 0;

  self.myFieldList = ko.observableArray([]);

  self.removeField = function(dynamicField) {
    self.myFieldList.remove(dynamicField);
  }

  self.addField = function() {
    noTracker++;
    self.myFieldList.push({
      label: "First " + noTracker,
      label1: "Second " + noTracker,
      fname: "var" + noTracker,
      lname: "varry" + noTracker,
      label2: "Textarea" + noTracker,
      texting: "newtext" + noTracker
    });
  }

  self.printField = function() {

    alert(self.myFieldList = ko.observableArray([]));

  }

}
ko.applyBindings(fieldModel);

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
}

#container {
  width: 980px;
  margin: 20px auto;
  padding: 15px;
}

#addVar:hover,
.removeVar:hover {
  cursor: pointer;
}

.alignRight {
  text-align: right;
}

.displayHeader {
  margin: auto;
  padding: 5px;
  width: 650px;
}

#action {
  margin-left: 320px;
  border: 4px solid #E3BE8D;
  -moz-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border-radius: 4px;
  background-color: #DAEDE2;
  display: inline-block;
  padding: 5px;
}

.msg {
  margin-left: 320px;
}

input,
textarea {
  padding: 5px;
  font-size: 16px;
}

input:focus,
textarea:focus {
  background-color: #F6F792;
}

.submit {
  text-align: right;
  margin-right: 50px;
}

footer {
  clear: both;
  margin-top: 20px;
  border-top: 1px solid #005;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>


<div id="container">
  <section id="main">

    <form method="post">

      <div data-bind="foreach: myFieldList">
        <p>
          <label data-bind="text: label"></label>
          <input data-bind="attr: { id: fname, name: fname}"><br/>
          <label data-bind="text: label1"></label>
          <input data-bind="attr: { id: lname, name: lname}"><br/>
          <label data-bind="text: label2"></label><br/>
          <textarea data-bind="attr: { id: texting }"></textarea>
          <span class="removeVar" data-bind="click: removeField">Remove</span>
        </p>
      </div>

      <p>
        <span id="addVar" data-bind="click: addField">Add</span>
      </p>

      <p class="alignRight">
        <input type="submit" value="Submit">
      </p>
      <!-- ko foreach: myFieldList -->
      <pre data-bind="text: JSON.stringify($data, null, 2)">
      </pre>
      <!-- /ko -->

    </form>

  </section>
  <!-- /main -->

  <footer>
  </footer>
  <!-- /footer -->

</div>
<!--!/#container -->

现在，更一般的问题:“如何查看动态表单的内容”。

Knockout 类型的期望您处理您在 View 模型中提交的表单。当您添加 submit绑定(bind)到 <form>元素，它取消默认行为。

ko.applyBindings({ submit: () => console.log("Submit!") });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<form data-bind="submit: submit">
  <input type="submit" value="Submit">
</form>

你的 submit方法必须知道要发布什么，并检索值。这是两件事:

1. 定义要发布到服务器的数据格式
2. 从 View 模型中检索此格式所需的值

在一个通用示例中:

const FormViewModel = function() {
  this.sections = ko.observableArray([]);
};

FormViewModel.prototype.addSection = function() {
  this.sections.push({
    nr: Date.now(),
    // Make an observable value property for
    // keeping up to date with the view
    value: ko.observable()
  });
};

FormViewModel.prototype.submit = function() {
  // Construct the format required by the server
  $.post(this.sections().map(function(section) {
    return { 
      id: "id_" + section.nr,
      val: section.value()
    };
  }));
};

ko.applyBindings(new FormViewModel());

// Mock post
$ = { 
  post: function(data) {
    console.log("posting");
    setTimeout(console.log.bind(console, data), 300);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<form data-bind="submit: submit">
  <ul data-bind="foreach: sections">
    <li>
      <input data-bind="value: value, attr: { placeholder: nr }">
    </li>
  </ul>

  <button data-bind="click: addSection">add value</button>

  <input type="submit" value="Submit">
</form>