Создание многоцветной таблицы HTML с помощью шаблонов jQuery и knockoutjs - PullRequest
Новая
       3

Создание многоцветной таблицы HTML с помощью шаблонов jQuery и knockoutjs

0 голосов
/ 14 сентября 2011

У меня есть следующий код (также в jsfiddle ): 

<table>
    <thead><tr><th>Equation</th><th>Equation</th></tr></thead>
<tbody data-bind="template: {name: 'equationTemplate', foreach: equations}"></tbody>
</table>

<script language="javascript" type="text/javascript">

</script>

<script type="text/x-jquery-tmpl" id='equationTemplate'>
    <!-- In here I want to be able to break it up into two 
    columns of two rather than one column of four-->
    <tr>
        <td>${first}+${second}=<input data-bind="value: answer"/></td>
    </tr>
</script>

С этим JS: 

$(document).ready(function () {

    var viewModel = {
        equations: ko.observableArray([
            { first: 1, second: 2, answer: 3 },
            { first: 4, second: 4, answer: 8 },
            { first: 10, second: 10, answer: 20 }, 
            { first: 5, second: 5, answer: 10}])
    };

    ko.applyBindings(viewModel);
});

Как мне изменить шаблон навывести это в таблицу из двух строк и двух столбцов?Уравнения 10 + 10 = 20 и 5 + 5 = 10. должны появиться во втором столбце.

Любая помощь с благодарностью.

1 Ответ

1 голос
/ 14 сентября 2011

Один из вариантов - переключиться на {{each}} вместо опции foreach привязки шаблона, чтобы у вас был доступ к индексу.Недостатком использования {{each}} является то, что ваш шаблон будет полностью перерисован, если какие-либо уравнения будут добавлены / удалены динамически.

Это будет выглядеть так: 

<table>
    <thead><tr><th>Equation</th><th>Equation</th></tr></thead>
<tbody data-bind="template: { name: 'equationTemplate', foreach"></tbody>
</table>

<script type="text/x-jquery-tmpl" id='equationTemplate'>
    {{each equations}}
        {{if $index % 2 == 0}}<tr>{{/if}}
            <td>${first}+${second}=<input data-bind="value: answer"/></td>
        {{if $index % 2 == 1}}</tr>{{/if}}   
    {{/each}}
</script>

Пример здесь: http://jsfiddle.net/rniemeyer/QESBn/1/

Другой альтернативой может быть создание зависимого объекта наблюдения, который представляет ваши данные в структуре, отображаемой на строки / столбцы.

Вот пример: http://jsfiddle.net/rniemeyer/QESBn/2/

...