jquery - ノックアウトjsビューモデルを動的に作成されたjquery行にデータバインドする方法

Question

ビューモデルにバインドされているページ内に、ユーザーがページに要素を追加できるセクションがあります。要素は、いくつかの値フィールドと、ビューモデルにデータバインドする必要がある選択要素で構成されるフィルター セクションです。

htmlでselectオプションをインラインで実行すると、正常に機能します。ただし、それを引き出して、フィルター コントロールを追加する jquery に追加すると、バインドに失敗します。これは、ビューモデルが既にバインドされていることが一部原因であることに気付き、再度バインディングの適用を呼び出そうとしましたが、これも失敗します。

このセクションはオプションであるため、他の分野のように foreach を使用することはできません。ユーザーがフィルターを追加したくない場合は、追加する必要がないため、jquery ルートを使用しました。

ページが既にレンダリングされている場合、select 要素をビュー モデルに再バインドする方法について誰か提案を提供できますか、またはこれを達成するためにノックアウトだけを使用するより良いアプローチがありますか?

コード: html

  <div id="filterSection" data-bind="with: ReportObject">
                <select data-bind="options: SelectedAttributes(), optionsText: function(SelectedAttributes){ return SelectedAttributes.NameHierarchy() + '.' + SelectedAttributes.LabelName() },  optionsCaption:'Select a Field...'">
                </select><!-- the select here works I added this for testing -->
                <div id="filterBuilder">
                    <input type="button" value="Add A Filter" title="Add A Filter" class="special" id="add" /> 
                </div>
            </div>

jQuery

function CreateFilterRow() {
        $("<div class='filterrow'><select class='queryterm' name='condition'><option  value='AND'>AND</option><option value='OR'>OR</option></select>" +
    "<select data-bind='options: SelectedAttributes(), optionsCaption:'Select a Field...'></select>&nbsp;&nbsp;<select name='operator'class='operClass'><option value='EQUALS' id='opt1'>Equals</option><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select>&nbsp;&nbsp;<input type='text' class='queryterm' name='fieldValue1' id='fieldvalue1' value='' size='25' />&nbsp;&nbsp;<a id='btnRemove' class='ui-button-text-only'>Remove</a><a id='btnadd' class='ui-button-text-only'>Add</a></div>").appendTo('#filterBuilder');
    };

    //orignal add row button
    $(document.body).on('click', '#add', function (event) {
        CreateFilterRow();
        ko.applyBindings(ReportWriterViewModel);
    });

ここでの jquery ブロックは、DOM へのフィールドの挿入とイベント クリックです。バインディングの適用は、さらに上の行で呼び出されます。KO コードは他の場所で機能するため省略したため、問題は VM にあるのではなく、VM の初期化後にこれらの要素を挿入することにあることがわかります。

また、applyBindings を使用しようとしましたが、dom 要素名を使用してもうまくいきませんでした

 ko.applyBindings(ReportWriterViewModel , document.getElementById('filterSection'));

前もって感謝します、

-乾杯