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的东西。