7

私はこれを私のhtmlに持っています:

<table class="dataTable" id="CADataTable">
<thead>
    <tr>
        <th> Type</th>
        <th> Name</th>
        <th> Adress</th>
        <th> ID Number</th>
        <th> Contact</th>
        <th> Note</th>
    </tr>   
</thead>
<tbody>
    <tr>
        <td>
            <select name="CAType" id="CAType" data-bind="value: CAType" style="width: 12em;">               
                <option>1</option> 
                <option>2</option>  
                <option>3</option>  
                <option>4</option>      
            </select>
        </td>       
<!--         <td><input type="text" name="CAType" data-bind="value: CAType" style="width: 9em;"></td> -->
        <td><input type="text" name="CAName" data-bind="value: CAName" style="width: 15em;"></td>
        <td><input type="text" name="CAAdress" data-bind="value: CAAdress" style="width: 15em;"></td>
        <td><input type="text" name="CAIdNum" data-bind="value: CAIdNum" style="width: 6em;"></td>
        <td><input type="text" name="CAContact" data-bind="value: CAContact" style="width: 10em;"></td>
        <td><input type="text" name="CANote" data-bind="value: CANote" style="width: 15em;"></td>
    </tr>
</tbody>
</table>
<button type="button" id="export" class="button" data-bind="click: newCreditRows">Add new row</button>

ノックアウトjsビューモデル内のjqueryコード、ボタンが押されると魔女が実行されます。

var clickAdd = 0;
                        newCreditRows = function(){
                            clickAdd++;
                            if(clickAdd<=9){
                                $('#CADataTable tr:last').after('<tr><td><select name="CAType' +clickAdd+ '" id="CAType' +clickAdd+ '" data-bind="value: CAType' +clickAdd+ '" style="width: 12em;"><option>Съдлъжник</option> <option>Поръчител</option>   <option>3то Лице</option>   <option>ипотекарни / заложни длъжници</option>      </select></td><td><input type="text" name="CAName' +clickAdd+ '" data-bind="value: CAName' +clickAdd+ 
                                  '" style="width: 15em;"></td><td><input type="text" name="CAAdress' +clickAdd+ '" data-bind="value: CAAdress' +clickAdd+ 
                                  ' " style="width: 15em;"></td><td><input type="text" name="CAIdNum' +clickAdd+ ' " data-bind="value: CAIdNum' +clickAdd+ 
                                  '" style="width: 6em;"></td><td><input type="text" name="CAContact' +clickAdd+ '" data-bind="value: CAContact' +clickAdd+ 
                                  ' "style="width: 10em;"></td><td><input type="text" name="CANote' +clickAdd+ '" data-bind="value: CANote' +clickAdd+ '" style="width: 15em;"></td></tr>');                            
                            }else
                                alert("Maximum number reached!");
                            };

すべてが正常に機能していますが、jquery コードによって追加された新しい行が値を変数にバインドできないことに気付きましたko.observable()(viewmodel ですべてが正しく宣言されていますが、コードが巨大になるため、投稿していません) .)

私のコードでは、観察可能なCAAdress1魔女が次のように宣言されていることを意味し'" data-bind="value: CAAdress' +clickAddます。

文字エスケープのような非常に小さなものが欠けていると確信していますが、jquery とノックアウトにはまだ慣れていないため、それを見つけることができません。

4

1 に答える 1

3

applyBindings メソッドを呼び出した後、html を dom に挿入しています。そのため、コは新しい要素を認識していません。

このフィドルを見てください 

var CA = function() {
    this.CAName = null;
    this.CAAdress= null;
    this.CAIdNum = null;
    this.CAContact = null;
    this.CAName = null;
    this.CANote= null;
    this.CAType = null;
};

var vm = {
    newCreditRows : function () {

        this.creditRows.push(new CA());
    },
    creditRows : ko.observableArray()
};


ko.applyBindings(vm);

お役に立てば幸いです。

于 2013-07-11T08:11:03.333 に答える