Question

我有一个项目列表，可以是两种类型之一 - 根据类型，我需要使用不同的样式/布局。我现在正在做的是迭代所有项目并为每个项目显示两个“模板”，但每个项目只显示一个模板，具体取决于type（）的计算方式。这似乎不优雅，因为我每个项目只需要一个模板 - 页面上一半的标记永远不可见。

有什么方法我只能加载这些项目所需的标记，而不会将它们分成两个不同的数组？

Answer 1

是的，这样的事情对你有用。

<div data-bind="foreach: yourArray">

    <div data-bind="if: isTypeOne">
        <div>template for type one</div>
    </div>

    <div data-bind="if: isTypeTwo">
        <div>template for type two</div>
    </div>

</div>

这样，每个条件标记内的模板仅在计算为true时生成。

Answer 2

您应该做的是将两个“模板”放入真实的模板中，并添加一个计算的observable来决定使用哪个模板。如果您的模板非常复杂或者有许多不同的模板可能会显示，这将特别有用。

例如，假设你有一个用户：

function User(user) {
    this.name = ko.observable(user.name);
    this.isSuperUser = ko.observable(user.isSuperUser);

    // this chooses which template to use        
    this.userTemplate = ko.computed(function () {
        return this.isSuperUser()
            ? "userTemplate-superuser"
            : "userTemplate-user";
    }, this);
}

根据用户列表，您可以根据userTemplate的内容显示相应的模板。

<div data-bind="foreach: users">
    <div data-bind="template: userTemplate"></div>
</div>

<script id="userTemplate-superuser" type="text/html">
    <div class="su">
        Greetings super user <span data-bind="text: name"></span>
    </div>
</script>
<script id="userTemplate-user" type="text/html">
    <div class="u">
        Greetings regular user <span data-bind="text: name"></span>
    </div>
</script>

demo

有没有办法不加载具有敲除条件的元素？

2 个答案: