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

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!