Как создать выбираемые строки из привязки foreach?

0

KO генерирует таблицу через привязку foreach:

<table>
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
    </tbody>
</table>

Я хочу, чтобы строки были выбраны. В крайнем простом случае я могу сделать это с тремя div и jQuery. Обратите внимание: мне нужно однозначно идентифицировать строку, которая была нажата. В этом примере я делаю это, читая идентификатор.

<div id="row1">Row 1</div>
<div id="row2">Row 2</div>
<div id="row3">Row 3</div>

$('#row1, #row2, #row3').click(function() {
    console.log($(this).attr('id') + ' clicked');
       $(this).css('background-color','yellow');
});

Когда KO генерирует мой <tr> как я могу установить уникальное значение для каждой строки?

FIDDLE

Теги:
knockout.js

2 ответа

2
Лучший ответ

Добавьте "выбранный" флаг к вашим элементам, которые заполняют <tr>:

ko.applyBindings({
        people: [
            { firstName: 'Bert', lastName: 'Bertington', isSelected: ko.observable(false) },
            { firstName: 'Charles', lastName: 'Charlesforth', isSelected: ko.observable(false) },
            { firstName: 'Denise', lastName: 'Dentiste', isSelected: ko.observable(false) }
        ]
    });

Затем используйте привязку <tr> используя isSelected чтобы применить класс css, а также привязку click для переключения состояния isSelected (возможно, вам не нужно переключаться - я просто сделал это для этого примера):

<tr data-bind='css: { selected: isSelected }, click: function() { $data.isSelected(!$data.isSelected()); }'>

Обновлен скрипт.

Поделиться
  • 0
    Мне нужно знать, какой уникальный ряд выбран. В реальном приложении один из столбцов будет использоваться для запроса БД.
  • 0
    Если это свойство объекта, который вы привязываете, вы можете получить его в обработчике кликов.
Показать ещё 1 комментарий
0

Зачем вам нужно уникальное значение? Если вам нужно всего лишь выделить строку, вы можете это сделать. http://jsfiddle.net/jayblanchard/d9bE6/4/

$('tr').click(function() {
       $(this).css('background-color','yellow');
});

Вы можете установить уникальный идентификатор для каждой строки с помощью.each() -

$('tr').each(function(index) {
    $(this).attr('id', index);
});
Поделиться
  • 0
    Мне нужно знать, какой уникальный ряд выбран. На странице есть несколько таблиц. Не все из них можно выбрать.
  • 0
    Ах хорошо. Вы спрашивали об установке уникального значения для каждой строки, я не знал, что вам нужно знать, какие из них были выбраны.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню