javascript - knockoutjs - 渲染模板或 foreach 到自身

Question

我最近一直在玩knockoutjs，看看它是否会对我所做的事情有任何帮助。不过我有点卡住了。

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

示例标记为:

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

参见this article请访问 Steve Sanderson 的博客了解更多信息。

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

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