我已经看到了几个与此有关的问题,但是我仍然无法弄清我在做什么错。
我想做的是从服务器获取一个JSON对象,它看起来像这样:
{
"firstname": "Blanchard",
"lastname": "Buckner",
...
}
视图模型执行AJAX调用,并且数据似乎已正确设置。但是,当我尝试将其传递给我的singleContact函数以绑定到视图时,什么也没发生。
我是Knockout的新手,所以我确定自己在犯一个非常简单的错误,但是我尝试了一段时间才弄清楚了,但没有任何反应。
// Binds json db data to each contact.
function singleContact(data) {
var self = this;
self.firstName = data.firstname;
self.lastName = data.lastname;
self.fullName = ko.computed(function() {
return self.firstName + " " + self.lastName;
}, self);
self.image = data.image;
self.position = data.position;
self.company = data.company;
};
function detailViewModel(contactID) {
var self = this;
self.contactID = ko.observable(contactID);
self.contact = ko.observableArray([]);
self.getContact = function(id) {
$.ajax({
type: 'GET',
url: 'http://localhost:3000/contacts/' + id,
dataType: 'json',
success: function(data) {
console.log(singleContact(data)); <---- Always Undefined. The data is a JSON object.
}
});
}
self.getContact(self.contactID());
};
编辑:
这是标记,应该是第一次包含它。
<!-- ko foreach: contact -->
<img class="contact__image" data-bind="attr:{src: image, alt: fullName}" />
<h1 data-bind="text: fullName"></h1>
<h2>
<span data-bind="text: position"></span>,
<span data-bind="text: company"></span>
</h2>
<h5>Notes on <span data-bind="text: fullName"></span></h5>
<p></p>
<!-- /ko -->
最佳答案
您需要使用new
关键字创建一个singleContact对象:
var contact = new singleContact(data);
然后可以将其分配给detailViewModel上的可观察对象:
self.singlecontact(contact);
我还建议您对ViewModel使用Upper Camelcase。即。
DetailViewModel
代替detailViewModel
,就像使用面向对象的编程时使用其他任何语言一样。