Knockoutjs: Zugriff auf Eigenschaft des beobachtbaren Objekts

Question

Ich bin neu zu knockoutjs und ich befolge das Microsoft-Tutorial zur Verwendung von knockoutjs mit MVC-Web-API, die Sie hier finden: https://www.asp.net/web-api/overview/data/using-web-api-with-entity-framework/part-8. Dieser Schritt im Tutorial erklärt, wie ein „Buch“ Objekt zu einem beobachtbaren zuweisen, erklärt dann, dass die Eigenschaften des Objekts zu binden, HTML, würde ich die Author Eigenschaft wie folgt zugreifen:

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

Die beobachtbare und Ajax-Aufruf sieht so aus:

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); 
    }); 
} 

Meine Frage ist, was, wenn ich die AuthorName-Eigenschaft von Javascript zugreifen möchte? Ich dachte, es wäre so etwas, aber das scheint nicht zu funktionieren. Ich bin mir nicht sicher, ob es nur eine Syntax Problem oder etwas komplizierter:

self.detail().AuthorName 

Dieses komplette Quellcode für dieses Beispielprojekt kann hier heruntergeladen werden: https://github.com/MikeWasson/BookService

Answer 1

Unten gibt es zwei Schnipsel mit einer Probe UI , die versuchen zu simulieren, dass du suchst. Ich vermute, dass Sie entweder das View-Modell mit den Apply-Bindings nicht korrekt eingerichtet haben oder Sie die getBookDetail-Methode nicht aufrufen.

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 sollte gut funktionieren, aber Sie müssen sicherstellen, dass self.detail() nicht null oder etwas zurückgibt, die nicht die Eigenschaft hat AuthorName auf es.