php - 使用 knockout.js 和 php 检查输入

Question

我是 knockout.js 的新手，我掌握了基础知识，但我对如何检查输入感到困惑。我正在使用 PHP 来获取 POST 信息并使用 knockout 来创建表单。

我有一个动态生成文本框的表单。假设我提交了表格，其中一个值没有通过标准。表格现在已重置，一切都是空的。使用 PHP，我只是将 box = 的值设置为发布的内容，但是由于 knockout 使用以下语法，我不确定如何处理发布的值

这是我的javascript

//misc_form.js
function Form_Entry(name) {
   var self = this;
   self.name = ko.observableArray([]);
}

function EntriesViewModel() {
    var self = this;
    self.entries = ko.observableArray();

    self.add_entry = function() { 
        if(self.entries().length < 3){
        self.entries.push(new Form_Entry( ));
        }
    }
    self.remove_entry = function(name) { self.entries.remove(name) }

}
ko.applyBindings(new EntriesViewModel());

和 HTML

<table>
    <thead><tr>
    <th>Field Name</th><th></th>
    </tr></thead>
    <form method="post">
         <tr><td>Form Name</td><td><input type="textbox" name="form_name"/></td></tr>
         <tbody data-bind="foreach: entries">
         <tr>
         <td>Label</td><td><input data-bind="value: name"/></td>
         <td><a href="#" data-bind="click: $root.remove_entry">Remove</a></td>
        </tr>    
    </tbody>
</table>
<button data-bind="click: add_entry">Add Input Textbox</button>

    <br>
    <br>

    <input type="hidden" name="entries" data-bind="value: ko.toJSON(entries)" />
    <button type="submit">Submit Form</button>
    </form>

Answer 1

通过 $.ajax 发布表格并传回任何未验证的值(可能是 JSON)，然后只需将您绑定(bind)到文本框的可观察值的值设置为从验证传回以显示给用户的值。

有很多方法可以做到这一点，大致如下:

JS:

//in view model
var self = this;
this.textBox1 = ko.observable();
//...

//validate
$.ajax({
  url: 'validateForm.php',
  success: function(data) {
    if (data.success === false) {
         //set value of textbox back to old value
         self.textBox1(data.textBox1);
         //and so on...
    }
  }
});

HTML:

<input data-bind="value: textBox1" />

PHP:

//validate...
//....
$returnData = array('success' => FALSE, 'textBox1' => $textBox1Val);
echo json_encode($returnData);

---

更新:根据您更新的代码，我创建了一个包含您代码更新的 jsFiddle。 Knockout 需要正确的标记才能正常工作(您的 <table> 和 <form> 嵌套)，并且我添加了有关如何使提交按钮调用 JS 函数的示例代码。

您可以在此处查看代码:http://jsfiddle.net/3sduY/1/