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

如果我在控制台中像toClicked().title那样调用此observable，我就会返回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"。当您使用普通的可观察对象时，可以关闭括号，但是当它是表达式时，括号是必需的。另请参阅this answer。

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

下面的代码段说明了不同之处。

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>

KnockoutJS Databinds在返回值时返回空字符串

1 个答案: