1

私はノックアウト.jsにかなり慣れていないので、基本を理解していますが、入力をチェックする方法について混乱しています。POST 情報を取得するために PHP を使用し、フォームを作成するためにノックアウトを使用しています。

テキストボックスを動的に生成するフォームがあります。フォームを送信し、値の 1 つが基準を満たしていないとします。フォームがリセットされ、すべてが空になります。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 として) 返してから、テキスト ボックスにバインドしたオブザーバブルの値を検証から返された値に設定して、ユーザーに表示します。

それを行うには多くの方法がありますが、次のような方法があります。

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 に答える