Безконтрольные операторы knockoutjs не работают в hottowel SPA?

Question

Я пытался использовать безконтрольные заявления, как <!--ko if:IsShowData==true --> из knockoutjs в шаблоне с горячим полотенцем, но это не беспокоило, если я использую видимое связывание с каким-то элементом, таким как div, тогда он работает очень хорошо. (<div data-bind="visible: IsShowData==true"></div>)

Кто-нибудь может сказать мне, если неконтролируемые утверждения о knockoutjs не работают в шаблоне с горячим полотенцем?

В шаблоне горячего полотенца по умолчанию я добавил несколько строк в home.html и home.js следующим образом:

views/home.html

<section>
    <h2 class="page-title" data-bind="text: title"></h2>
</section>

<!-- ko if: active()==true -->
hiiiiiiiiiiiiiii
<!--/ko-->


<div data-bind="visible: active() == true">
    byeeeeeeeeeeeee
</div>

И в файле viewmodels/home.js

define(['services/logger'], function (logger) {
    var vm = {
        activate: activate,
        active:ko.observable(false),
        title: 'Home View'
    };

    return vm;

    //#region Internal Methods
    function activate() {
        logger.log('Home View Activated', null, 'home', true);
        return true;
    }
    //#endregion
});

я увижу хииииииии но я не увижу покаеееее

Answer 1

Ваша проблема не связана с нокаутом или if безусловное связывание, но Durandal.js (который используется шаблонами HotTowel) и то, как Durandal обрабатывает модель представления.

Потому что в Durandal.js ваша viewmodel должна содержать только один корневой элемент, и он удаляет комментарии корневого уровня.

Из документации:

Представление имеет ровно один корневой элемент. Дюрандаль требует этого. Если комментарии найдены в корне, они будут удалены. В случае, когда найдено более одного корневого элемента, они будут заключены в div.

Таким образом, решение простое: просто два текста внутри section или обернуть все в div или же section:

<section>
    <h2 class="page-title" data-bind="text: title"></h2>

    <!-- ko if: active()==true -->
         hiiiiiiiiiiiiiii
    <!--/ko-->


    <div data-bind="visible: active() == true">
         byeeeeeeeeeeeee
   </div>
</section>

Или же

<div>
     <section>
        <h2 class="page-title" data-bind="text: title"></h2>
     </section>

    <!-- ko if: active()==true -->
       hiiiiiiiiiiiiiii
    <!--/ko-->


     <div data-bind="visible: active() == true">
        byeeeeeeeeeeeee
    </div>
</div>

Кстати вместо if: active()==true а также visible: active() == true Вы можете просто написать: if: active а также visible: active