2

我试图<!--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
});

我会看到 hiiiiiiii 但我不会看到 byeeeeee

4

1 回答 1

7

您的问题与 Knockout 或if无内容绑定无关，而是与 Durandal.js（由 HotTowel 模板使用）以及 Durandal 如何处理视图模型有关。

因为在 Durandal.js 中，您的视图模型应该只包含一个根元素，并且它会删除根级别的注释。

从文档中：

视图只有一个根元素。杜兰达尔需要这个。如果在根目录中找到注释，它们将被删除。在找到多个根元素的情况下，它们将被包裹在一个 div 中。

所以解决方案很简单：只需将 or 中的两个文本更多地section包装到divor中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

于 2013-06-24T12:07:15.380 回答