knockoutjs的无容器声明在hottowel SPA中不起作用？

Question

我试图<!--ko if:IsShowData==true -->在热毛巾模板中使用像knockoutjs 这样的无容器语句但是如果我使用像div这样的元素的可见绑定那么它就不用了,那么它工作得非常好.(<div data-bind="visible: IsShowData==true"></div>)

任何人都可以告诉我,如果无格式的knockoutjs声明在热毛巾模板中不起作用吗？

在Default Hot towel模板中,我在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

您的问题与Knockout或无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