2

クリックイベントハンドラーをKoGridのいくつかのアンカータグにバインドしようとしています。ただし、クリックイベントは最初のアンカータグにのみアタッチされます。タグの順序を切り替えると、以前は機能していなかった2番目のリンクが機能し始めるため、構文エラーではありません。

これがjsfiddleです：jsfiddle

<!-- Html -->
<div style="height: 300px; width: 500px" class="gridStyle" data-bind="koGrid: gridOptions"></div>

// Javascript
function viewModel() {
    var self = this;

    self.Events = ko.observableArray([
        { FirstName: "Jenny", LastName: "Jones" },
        { FirstName: "Henry", LastName: "Howe" }
    ]);

    self.gridOptions = {
        data: self.Events,
        columnDefs: [
            { field: 'FirstName' },
            { field: 'LastName' },
            { field: 'ActionField0', displayName: '&nbsp;',
             cellTemplate:
                 '<a href="#" data-bind="click: $userViewModel.save">Save</a> ' +
                 '<a href="#" data-bind="click: $userViewModel.edit">Edit</a>'         
            }
        ],
        autogenerateColumns: false,
        canSelectRows: false,
        showColumnMenu: false,
        multiSelect: false,
        enableColumnResize: false
    };

    self.edit = function() {
        alert("Edit");
    }

    self.save = function() {
        alert("Save");
    }
}

$(function () {
    var peopleViewModel = new viewModel();
    ko.applyBindings(peopleViewModel);
});
4

1 に答える 1

2

にはcellTemplate 、ルートレベルの要素が1つ必要です。あなたの場合、celltemplateには2つ含まれてaいるので、最初のものを使用します。

それを機能させるには（2つの別々の列を作成したくない場合）、2つのアンカーをdiv：でラップするだけです。

cellTemplate:
    '<div>' +
    '<a href="#" data-bind="click: $userViewModel.save">Save</a> ' +
    '<a href="#" data-bind="click: $userViewModel.edit">Edit</a>' +
    '</div>'

デモJSFiddle。

于 2013-03-06T05:54:32.023 に答える