Использование вложенных шаблонов выбивания для отображения вложенных данных - PullRequest
Новая
       20

Использование вложенных шаблонов выбивания для отображения вложенных данных

0 голосов
/ 11 октября 2011

Я пытаюсь создать таблицу со складными строками, используя нокаут. Каждая «родительская» строка существует на верхнем уровне моей структуры данных, и каждая «дочерняя» строка является элементом массива-члена.

Проблема возникает, когда я обновляю данные с сервера. Данные обновляются, но я могу сказать, что они заменяют мои объекты DOM, потому что флажок в «родительской» строке очищается. У меня есть скрипка, которая демонстрирует эту проблему, используя таймер для обновления данных:

http://jsfiddle.net/jdlogicman/m2LWk/

Я прочитал, что использование вложенного foreach вместо {{each}} должно исправить это, но я не могу заставить это работать - см. Закомментированный раздел в приведенной выше скрипке.

Если какой-либо существующий вопрос решает эту проблему, я не могу сказать, как. Любая помощь приветствуется

1 Ответ

0 голосов
/ 11 октября 2011

Вы не сохраняете значение флажка, поэтому оно каждый раз сбрасывается. Решает ли приведенная ниже скрипка вашу проблему?

http://jsfiddle.net/unklefolk/RYqTT/

<table>
    <thead>
        <th class="checkbox_th"/>
        <th class="name_th" align="left">Sample</th>
        <th class="status_th" align="left">Status</th>
    </thead>
    <tbody data-bind="template: {name: 'sampleRowTemplate', foreach: samples}"></tbody>
    <script type="text/x-jquery-tmpl" id="sampleRowTemplate">
        <tr>
            <td><input type="checkbox" name="select_sample" data-bind="checked: is_checked"/></td>
            <td><span data-bind='text: sample_name'/>   The checkbox =<span data-bind="text:is_checked"/></td>
            <td><span data-bind='text: ""'/><td/>
            </tr>
                {{each sample_runs()}}
                <tr>
                <td/>
                <td><span data-bind='text: $value.name'/></td>
                <td><span data-bind='text: $value.status'/></td>
            </tr>
                {{/each}}
                <!--
                <script type="text/x-jquery-tmpl" id="sampleRunTemplate">
                <td/>
                <td>${name}</td>
                <td>${status}</td>
            </script>
                <tr data-bind="template: {name: 'sampleRunTemplate', foreach: sample_runs  }"></tr>
                -->

            </script>
            </table>            


var mapping = {
    'samples': {
        key: function(item) {
            return ko.utils.unwrapObservable(item.id);
        },
        'sample_runs': {
            key: function(item) {
                return ko.utils.unwrapObservable(item.id);
            }
        }
    }
};

var data = {};
data.samples = [{
    id: "s1",
    sample_name: "AR008",
    is_checked: false,    
    sample_runs: [
        {
        id: "rs1",
        name: "run1",
        status: "done"}]}];
var viewModel = ko.mapping.fromJS(data, mapping);
ko.applyBindings(viewModel);

// update the data every 2 seconds
var i = 0;
setInterval(function() {
    var data = {};
    data.samples = [{
        id: "s1",
        sample_name: "AR008" + i,
        sample_runs: [
            {
            id: "rs1",
            name: "run" + i,
            status: "done" + i}]}];
    // is this right? updateFromJS is deprecated
    viewModel = ko.mapping.fromJS(data, viewModel);
    i++;
}, 2000);
...