KnockoutJS 数据绑定在调用返回值时返回空字符串

Question

假设我有一个data-bind：

<p data-bind="text: toClicked.title">This should be replaced.</p>

我有我的ko.observable()：

toClicked : ko.observable({})

然后根据对另一组数组的点击来填充，数据类似于：

markers : ko.observableArray([
    { title: 'Title', lat: 10, lng: -10, content: 'This is the relevant content' },
    // more objects in array
])

如果我在控制台中调用这个 observable，比如 toClicked().title，我会返回 Title。如果我只是调用toClicked();，我会得到以下响应：

Object { title: "Title", lat: 10, lng: -10, content: "This is the relevant content" }

但是，在上面的数据绑定中，我们什么都没有覆盖段落中的文本。

我在这里是否缺少一些东西来确保它正确绑定？所有其他 observables/observableArrays 都可以正常工作，所以我知道这与绑定如何处理信息有关。任何想法或想法将不胜感激！

顺便说一句，我试过$root.toClicked.title 和$parent.toClicked.title，不高兴。

Answer 1

您回答了自己的问题。在控制台中，您使用了toClicked().title，但在您的标记中使用了data-bind="text: toClicked.title"。当你使用一个普通的 observable 时，你可以去掉括号，但是当它是一个表达式时，括号是必需的。另见this answer。

做data-bind="text: toClicked().title"

下面的 sn-p 说明了区别。

vm = {
  toClicked: ko.observable({}),
  markers: ko.observableArray([{
    title: 'Title',
    lat: 10,
    lng: -10,
    content: 'This is the relevant content'
  }]),
  setClicked: function () {
    vm.toClicked(vm.markers()[0]);
  }
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div>First: <p data-bind="text: toClicked.title">This should be replaced.</p></div>
<div>Second: <p data-bind="text: toClicked().title">This should be replaced.</p></div>
<button data-bind="click:setClicked">Set it</button>