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

“稳定的 beta”版本 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 博客上的 this article。

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

除此之外，1.3.0 中还可以在 foreach 模板中访问父视图模型和根视图模型的功能非常有用，有助于让您的视图模型设计更加简洁。