1

我对 knockout.js 还是很陌生，我已经掌握了基础知识，但我对如何检查输入感到困惑。我正在使用 PHP 来获取 POST 信息并使用淘汰赛来创建表单。

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

这是我的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>
4

1 回答 1

2

通过发布表单$.ajax并传回任何未验证的值（可能是 JSON），然后只需将绑定到文本框的 observables 的值设置为从验证传回的值以向用户显示。

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

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/

于 2012-12-14T00:06:00.377 回答