1

HTML ページにインタラクティブなグリッド ビューを表示したいと考えています。テクノロジースタックに nodejs、express、twitterbootstrap、knockoutjs を使用しています。KOGrid を使用して、列の並べ替えやその他のグリッド機能が組み込まれたさまざまなデータ ポイントを表示しようとしています。

私の問題は、ボタンが連続してクリックされたときにイベントを発生させようとしています。そして、その特定の行のさまざまなデータ フィールドの一部をそのイベントに渡します。したがって、KOGrid の仕様では、cellTemplates を使用しており、onclick イベントで何らかの関数を呼び出す必要がありますが、その関数に KOGRID データ バウンド値を渡します。したがって、入力要素には data-bind="onclick: [関数の名前]( [データ境界変数の名前], [他のデータ境界変数の名前]) があります。

誰かがこれを行う方法を教えてもらえますか?

これが私のコードのサンプルです... CBTemplate の入力/オンクリックは、私が問題を抱えている場所です。

CBテンプレート:

<script type="text/html" id="actionTemplate">
<div data-bind="kgCell: $cell">
<input type="checkbox" value="1" class="checkbox" checked="checked" data-bind="onclick: 'MyOnClickFunction( siteId(), status() )'"/>
</div>
</script>

部門タグ:

<div data-bind="koGrid: { data: offer.siteCounts,
                    columnDefs: [ { field: 'templateField0', displayName: 'Site', cellTemplate: 'siteTemplate', width: 150},
                                 { field: 'status', displayName: 'Current Status', cellClass: 'site', cellTemplate: 'statusTemplate', width: 115},
                                 { field: 'details', displayName: 'Details', width: 175},
                                 { field: 'actionField0', displayName: 'Action', cellTemplate: 'cbTemplate', width: 200}],
                    autogenerateColumns: false,
                    displaySelectionCheckbox: false,
                    isMultiSelect: false }">
</div>
4

1 に答える 1

1

クリック イベント バインディングは、KO で次のようになります。

data-bind="click: function(data,event) { MyOnClickFunction(siteId(), status()) }"

これは、それで遊ぶことができる実際のJSFiddleです。

補足:

  • 私のサンプルでは、$root ​​バインディング コンテキスト プロパティを使用してサンプル関数にアクセスしました: $root.offer.MyOnClickFunction. ビューモデルで定義したレベルに応じて、これを調整する必要がありMyOnClickFunctionます。

  • return trueデフォルトのクリック アクションを続行させたい場合は、クリック バインディング ハンドラーから行う必要があります (例: チェックボックスのチェックなど)。

于 2012-11-27T19:13:00.117 に答える