KnockoutJS Databinds返回空字符串，同時呼籲下返回值

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，我會返回Title。如果我只需撥打toClicked();，我得到如下回應：

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

但是，數據綁定裏面上面，我們覆蓋一無所有的段落中的文本。

有沒有什麼我在這裏失蹤，以確保它的正確綁定？所有其他observable/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>