knockoutjs - 渲染模板或 foreach 到自身

Question

我最近一直在玩knockoutjs，看看它对我所做的事情是否有任何帮助。不过我有点坚持某件事。

假设我有一个 observableArray，并且我想使用模板绑定项目但没有容器，或者渲染自身。是否可以？

示例标记是：

<div class="header row">
    <div class="cell">Product Name</div>
    <div class="cell" data-bind="foreach: option_types">
        <div class="cell" data-bind="html: Name"></div>
    </div>
    <div class="cell">Level</div>
    <div class="cell">Infinite</div>
</div>

但是我真正想要的是这样的东西（注意没有子 .cell 元素和“renderSelf” - 组成的参数），

<div class="header row">
    <div class="cell">Product Name</div>
    <div class="cell" data-bind="foreach: option_types, renderSelf: true">
        ${Name}
    </div>
    <div class="cell">Level</div>
    <div class="cell">Infinite</div>
</div>

然后这会导致类似这样的结果

<div class="header row">
    <div class="cell">Product Name</div>
    <div class="cell">Name 1</div>
    <div class="cell">Name 2</div>
    <div class="cell">Name 3</div>
    <div class="cell">Name 4</div>
    <div class="cell">Level</div>
    <div class="cell">Infinite</div>
</div>

吗？或者我以错误的方式思考它？

谢谢。

Answer 1

版本 1.3 是“稳定测试版”，允许您声明所谓的无容器控制流。这是一种奇特的说法，您可以在 HMTL 注释中声明 foreach，这将允许您实现所需的输出。对于您的示例，它看起来像这样：

<div class="header row">
    <div class="cell">Product Name</div>
    <!-- ko foreach: option-types -->
    <div class="cell" data-bind="html: Name"></div>
    <!-- /ko -->
    <div class="cell">Level</div>
    <div class="cell">Infinite</div>
</div>

请参阅 请参阅 Steve Sanderson 博客上的这篇文章了解更多信息。

我最近在一个比较大的应用程序上使用了1.3.0，发现它非常稳定。

顺便说一句，1.3.0 中还可以在 foreach 模板中访问父视图模型和根视图模型，这一功能非常有用，有助于保持视图模型设计更加简洁。