Question

我对knockout.js很新，但我有基本知识，但我对如何检查输入感到困惑。我使用PHP来获取POST信息并使用knockout来创建表单。

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

这是我的javasctipt

//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），然后将绑定到文本框的observable的值设置为从验证传递回来的值用户。

有很多方法可以做到这一点，具体如下：

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/

用knockout.js和php检查输入

1 个答案: