2

次のマークアップ (要約) を使用して、人物オブジェクトのリストをテーブルに表示しています。行がクリックされたときに [詳細の編集] ポップアップを開きたいのですが、Knockout データ バインディングによってテーブルに追加された行に対して、基本的なイベント バインディングが機能しません。

<script>
    function PersonModel(data) {
        var self = this;
        self.id = data.Id;
        self.firstName = data.FirstName;
    }
    $(function () {
        function personListModel() {
            var self = this;
            self.persons = ko.observableArray([]);
            $.getJSON("Person/IndexJson", function (allData) {
                var mappedPersons = $.map(allData, function (item) { return new PersonModel(item); });
                self.persons(mappedPersons);
            });
        }
        ko.applyBindings(new personListModel());
        $(".person-row").click(function () {
            alert("Hello ");
        });
    });
</script>
<table>
    <tbody data-bind="foreach: persons">
        <tr class="person-row" data-bind="attr: { 'data-id': id }">
            <td data-bind="text: firstName"></td>
            <td data-bind="text: surname"></td>
            <td data-bind="text: email"></td>
            <td data-bind="text: cell"></td>
        </tr>
    </tbody>
</table>

ページがレンダリングされてバインドされた後に JS コンソールからクリック イベント ハンドラーをバインドすると、そのハンドラーは正しく呼び出されますが、上記のコードの最初のイベント バインドは機能しません。ノックアウトによって生成された行にバインドするにはどうすればよいですか? の後にイベントハンドラーをバインドするだけで十分だと思いましたko.applyBindings()。

4

1 に答える 1

3

ページの読み込み後に追加される DOM 要素のイベントをサブスクライブするには、JQuery のon メソッドを使用する必要があります。

$(".person-row").on("click", function(event){
    alert("Hello ");
});

または、クリック バインディング構造を使用して、ノックアウトでサブスクリプションを処理することもできます。

function personListModel() {
    var self = this;
            ...

    self.personClicked = function(data) {
        alert("Hello ");
    }
}

そしてあなたの見解では：

<tr class="person-row" data-bind="attr: { 'data-id': id }, click: $root.personClicked">

このfiddleで実際に動作しているのを見ることができます。

于 2012-10-14T08:50:20.693 に答える