Knockoutjs：訪問可觀察對象的屬性

Question

我是knockoutjs 的新手，我正在關注有關如何將knockoutjs 與位於此處的MVC Web API 一起使用的Microsoft 教程： https : //www.asp.net/web-api/overview/data/using-web-api- with-entity-framework/part-8 。 教程中的這一步解釋了如何將“Book”對象分配給 observable，然后解釋將對象的屬性綁定到 html，我將像這樣訪問 AuthorName 屬性：

data-bind="text: detail().AuthorName"

observable 和 ajax 調用如下所示：

self.detail = ko.observable();

self.getBookDetail = function (item) {
    ajaxHelper(booksUri + item.Id, 'GET').done(function (data) {
        self.detail(data);
    });
}

function ajaxHelper(uri, method, data) {
    self.error(''); // Clear error message
    return $.ajax({
        type: method,
        url: uri,
        dataType: 'json',
        contentType: 'application/json',
        data: data ? JSON.stringify(data) : null
    }).fail(function (jqXHR, textStatus, errorThrown) {
        self.error(errorThrown);
    });
}

我的問題是，如果我想從 javascript 訪問 AuthorName 屬性怎么辦？ 我認為它會是這樣的，但這似乎不起作用。 我不確定這只是語法問題還是更復雜的問題：

self.detail().AuthorName

這個示例項目的整個源代碼可以在這里下載： https : //github.com/MikeWasson/BookService

Answer 1

下面有兩個帶有示例 UI 的片段，它們嘗試模擬您正在尋找的內容。 我懷疑您沒有使用應用綁定正確設置視圖模型，或者您沒有調用 getBookDetail 方法。

 function ViewModel(){ self = this; self.detail = ko.observable(); self.getBookDetail = function () { var book = { AuthorName: 'foo', Category: 'bar'}; self.detail(book); } self.getBookDetail(); } ko.applyBindings(new ViewModel());

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div data-bind="text:detail().AuthorName"></div>

 function ViewModel(){ self = this; self.detail = ko.observable(); self.getBookDetail = function () { var book = { AuthorName: 'foo', Category: 'bar'}; self.detail(book); } } ko.applyBindings(new ViewModel());

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div data-bind="text:detail() !== undefined ? detail().AuthorName : '' "></div> <input type="button" value="click" data-bind="click: getBookDetail"/>

Answer 2

self.detail().AuthorName應該可以正常工作，但您需要確保self.detail()沒有返回null或沒有屬性AuthorName的東西。