我已经看到了几个与此有关的问题,但是我仍然无法弄清我在做什么错。

我想做的是从服务器获取一个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,就像使用面向对象的编程时使用其他任何语言一样。

07-28 05:38