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

下面有两个带有示例用户界面的代码段，用于模拟您正在寻找的内容。我怀疑你没有使用apply绑定正确设置视图模型，或者你没有调用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的内容在上面。

Knockoutjs：访问可观察对象的属性

2 个答案: