[英]Knockoutjs: Accessing property of observable object
I'm new to knockoutjs and I'm following the Microsoft tutorial on how to use knockoutjs with MVC Web API located here: https://www.asp.net/web-api/overview/data/using-web-api-with-entity-framework/part-8 .我是knockoutjs 的新手,我正在关注有关如何将knockoutjs 与位于此处的MVC Web API 一起使用的Microsoft 教程: https : //www.asp.net/web-api/overview/data/using-web-api- with-entity-framework/part-8 。 This step in the tutorial explains how to assign a "Book" object to an observable, then explains that to bind the object's properties to html, I would access the AuthorName property like this:
教程中的这一步解释了如何将“Book”对象分配给 observable,然后解释将对象的属性绑定到 html,我将像这样访问 AuthorName 属性:
data-bind="text: detail().AuthorName"
The observable and ajax call looks like this: 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);
});
}
My question is what if I want to access the AuthorName property from javascript?我的问题是,如果我想从 javascript 访问 AuthorName 属性怎么办? I thought it would be something like this but this doesn't seem to work.
我认为它会是这样的,但这似乎不起作用。 I'm not sure if it's just a syntax issue or something more complicated:
我不确定这只是语法问题还是更复杂的问题:
self.detail().AuthorName
This entire source code for this sample project can be downloaded here: https://github.com/MikeWasson/BookService这个示例项目的整个源代码可以在这里下载: https : //github.com/MikeWasson/BookService
Below there are two snippets with a sample UI, that try to simulate that you are looking for.下面有两个带有示例 UI 的片段,它们尝试模拟您正在寻找的内容。 I suspect that either you don't have set up correctly the view model with the apply bindings or you don't call the getBookDetail method.
我怀疑您没有使用应用绑定正确设置视图模型,或者您没有调用 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"/>
self.detail().AuthorName
应该可以正常工作,但您需要确保self.detail()
没有返回null
或没有属性AuthorName
的东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.