Question

我正在玩淘汰赛，我无法弄清楚如何将超过1个对象属性绑定到元素？

这是我的模板，我尝试了data-bind="text: name.first name.last"：

<script type="text/html" id="person-template">
    <h3 data-bind="text: name.first name.last"></h3>
    <p>Age: <span data-bind="text: age"></span></p>
    <p>Company: <span data-bind="text: company"></span></p>
    <hr>
</script>

在角度我会使用ng-repeat并执行<h3>{{name.first}} {{name.last}}</h3>之类的操作，但我不想为此项目加载角度

Answer 1

像这样：

<h3 data-bind="text: name.first + ' ' + name.last"></h3>

或者，如果这些项目是可观察的：

<h3 data-bind="text: name.first() + ' ' + name.last()"></h3>

或者，如果你想在你看来分开的事情：

<h3 data-bind="with: name">
  <span data-bind="text: first"></span>
  <span data-bind="text: last"></span>
</h3>

或者，如果你想尽可能地模仿Angular：

<h3>
  <!-- ko text: name.first --><!-- /ko -->
  <!-- ko text: name.last --><!-- /ko -->
</h3>

或者，如果你想进行单元测试/使其成为业务逻辑：

<h3 data-bind="text: name.fullname"></h3>

function Name() {
  var self = this;
  self.first = ko.observable();
  self.last = ko.observable();
  self.fullname = ko.computed(function() {
    return self.first() + " " + self.last();
  });
}

作为脚注，KnockoutJS与AngularJS之间存在一些相关差异：

在Knockout中，（没有插件）没有直接等效的AngularJS支架样式（例如{{ name.first}}）渲染。

在KnockoutJS中，可观察属性是函数（而Angular可以跟踪对纯JS属性的更改）。如果只是你绑定的东西，你只能（可选）不用括号。假设first是一个可观察的，这些工作：

<span data-bind="text: name.first"></span> shortcut...
<span data-bind="text: name.first()"></span> equivalent to previous...
<span data-bind="text: name.first() + name.last()"></span> () are required now...

但这不是：

<span data-bind="text: name.first + 'something else'"></span> !doesn't work!

如何将多个属性绑定到元素？

1 个答案: