Бесконтактные заявления нокаутов не работают в hottowel SPA?

Question

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

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

В шаблоне по умолчанию Горячее полотенце я добавил несколько строк в 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 
}); 

я буду видеть hiiiiiiii но я не увижу byeeeeee

Answer 1

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

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

От documentation:

мнение имеет ровно один корневой элемент. Дюрандал требует этого. Если комментарии находятся у корня, они будут удалены. В случае , где найдено более одного элемента корня, они будут обернуты в 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