Як створити шаблон структур If-Else у поданнях з обмеженими даними?

Я постійно використовую цю ідіому в шаблонах HTML на основі KO:

<!-- ko if: isEdit -->
<td><input type="text" name="email" data-bind="value: email" /></td>
<!-- /ko -->
<!-- ko ifnot: isEdit -->
<td data-bind="text: email"></td>
<!-- /ko -->

Чи існує кращий / чистіший спосіб зробити умовні умови в KO, чи є кращий підхід, ніж просто використання традиційних конструкцій if-else?

Крім того, я хотів би лише зазначити, що деякі версії Internet Explorer (IE 8/9) не аналізують наведений вище приклад правильно. Будь ласка, перегляньте це питання для отримання додаткової інформації. Короткий підсумок: не використовуйте коментарі (віртуальні прив'язки) всередині тегів таблиці для підтримки IE. Використовуйте tbodyзамість цього:

<tbody data-bind="if: display"><tr><td>hello</td></tr></tbody>

Існує кілька різних способів, з якими ви можете обробляти цей тип коду.

• з комбінацією if / ifnot, як зараз. Це працює чудово і не дуже багатослівно.

• Прив’язка комутатора / справи Майкла Беста ( https://github.com/mbest/knockout-switch-case ) є досить гнучкою і може дозволити вам легко обробляти ці та більш складні (більше станів, ніж true / false).

• Інший варіант - використання динамічних шаблонів. Ви повинні прив'язати область до одного або декількох шаблонів, використовуючи назву шаблону на основі спостережуваного. Ось допис, який я давно писав на цю тему: http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html . У вашому сценарії це може виглядати так:

<td data-bind="template: $root.getCellTemplate"></td>

<script id="cellEditTmpl" type="text/html">
    <input type="text" name="email" data-bind="value: email" />
</script>

<script id="cellTmpl" type="text/html">
    <span data-bind="text: email"></span>
</script>

getCellTemplateФункція може жити там , де, але буде дано елемент ($ даних) в якості першого аргументу , і поверне ім'я шаблону для використання.

Один із підходів полягає у використанні іменованих шаблонів (які можуть підтримувати передачу аргументів):

<!-- ko template: isEdit() ? 'emailEdit' : 'emailDisplay' --><!-- /ko -->
<script id="emailEdit" type="text/html">
    <td><input type="text" name="email" data-bind="value: email" /></td>
</script>
<script id="emailDisplay" type="text/html">
    <td data-bind="text: email"></td>
</script>

Інший варіант - використовувати мій плагін switch / case , який би працював так:

<!-- ko switch -->
    <!-- ko case: isEdit -->
        <td><input type="text" name="email" data-bind="value: email" /></td>
    <!-- /ko -->
    <!-- ko case: $else -->
        <td data-bind="text: email"></td>
    <!-- /ko -->
<!-- /ko -->

Щоб уникнути перерахунку прив'язки нокаутів при використанні комбінації if: / ifnot: ви можете використовувати їх у поєднанні з конструкцією 'with:'

    <!-- ko with: $data.DoSomePerformanceCriticalWork($data.SomeParameter()) -->
        <!-- ko if: $data.Condition() -->
           ... some markup ...
        <!-- /ko -->
        <!-- ko ifnot: $data.Condition() -->
           ... some markup ...
        <!-- /ko -->
    <!-- /ko -->

Зараз є також knockout-elseприв'язка / плагін (який я написав для вирішення цієї проблеми).