0

我有一个可以是两种类型之一的项目列表 - 根据类型，我需要使用不同的样式/布局。我现在正在做的是遍历所有项目并为每个项目显示两个“模板”，但每个项目仅显示一个模板，具体取决于 type() 的评估方式。这看起来不优雅，因为我真的每个项目只需要一个模板 - 页面上一半的标记将永远不可见。

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

4

2 回答 2

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>

演示

于 2013-03-25T23:27:46.270 回答
2

是的，这样的事情应该适合你。

<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>

这样，每个条件标记内的模板仅在其评估为真时生成。

于 2013-03-25T21:49:18.807 回答