data-bind="compose:{}" 对比

Question

我在这边看（文档） http://durandaljs.com/documentation/Using-Composition.html

而且我发现两种成分都有显着差异，而不是有内部容器或没有内部容器。

第一个：

<div data-bind="compose: {
            view: 'Box',
            model: 'Box',
            activationData: {
                hasStar: true
            }
        }"></div>

和

<!-- ko compose: ________ --> <!-- /ko -->

（实际上里面可能有东西）

他们还谈到了 require 的用法。

有什么不同的人吗？或者我应该什么时候使用每一个？

Answer 1

Knockout 命名第二个绑定语法，，一个 虚拟元素。

它们的唯一目的是让您无需更改标记即可创建 data-binds。

使用虚拟绑定，您可以这样做：

<ul>
  <li class="category">Fruits</li>
  <!-- ko foreach: fruits -->
  <li data-bind="text: name"></li>
  <!-- /ko -->
</ul>

可以这样渲染 HTML：

<ul>
  <li class="category">Fruits</li>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
</ul>

简而言之，如果您没有逻辑语义 HTML 元素来放置绑定，您可以使用 虚拟元素绑定 。如果已经有一些围绕您的部分视图进行包装，我建议使用 data-bind 属性 .

data-bind="compose:{}" 对比

data-bind=" compose:{}" vs

knockout.js

data-binding

durandal

composition