javascript - Knockout.js - 尝试将 JSON 添加到 View 模型未定义

Question

我已经看到了几个与此相关的问题，但我仍然无法弄清楚我在这里做错了什么。

我想做的是获取从服务器返回的 JSON 对象，如下所示:

{
  "firstname": "Blanchard",
  "lastname": "Buckner",
  ...
}

View 模型执行 AJAX 调用，并且数据似乎设置正确。但是当我尝试将其传递到 singleContact 函数以绑定(bind)到 View 时，什么也没有发生。

我是 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 -->

Answer 1

您需要使用new关键字来创建一个singleContact对象:

var contact = new singleContact(data);

然后可以将其分配给detailViewModel上的可观察对象:

self.singlecontact(contact);

我还建议您使用大驼峰命名法作为 viewModel。 IE。 DetailViewModel 而不是 detailViewModel，就像使用面向对象编程时在任何其他语言中一样。