javascript - knockout : Accessing property of observable object

Question

我是 knockoutjs 的新手，我正在关注有关如何通过 MVC Web API 使用 knockoutjs 的 Microsoft 教程，该教程位于此处:https://www.asp.net/web-api/overview/data/using-web-api-with-entity-framework/part-8 。本教程中的这一步解释了如何将“Book”对象分配给可观察对象，然后解释了要将对象的属性绑定(bind)到 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 的片段，尝试模拟您正在寻找的内容。我怀疑您没有使用 apply 绑定(bind)正确设置 View 模型，或者没有调用 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"/>