Knockout.js - Попытка добавить JSON в viewmodel не определена

Question

Я видел несколько проблем с этим, но я все еще не могу понять, что я делаю неправильно здесь.

То, что я пытаюсь сделать, это объект JSON я получаю от сервера, который выглядит следующим образом:

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

The View Model делает вызов 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 --> 

Answer 1

Вы должны использовать new ключевое слово, чтобы создать singleContact объект:

var contact = new singleContact(data); 

это может быть назначен наблюдаемой на detailViewModel:

self.singlecontact(contact); 

Я также рекомендуем использовать верхнюю камеру Camelcase для viewModel. то есть. DetailViewModel вместо detailViewModel, как и на любом другом языке при использовании объектно-ориентированного программирования.

Answer 2

Настоящий рабочий пример. Отсутствует то, что вы не нажимали свою созданную модель на наблюдаемый массив. Я показал, что вы можете получить массив результатов и легко их протолкнуть.

function DetailViewModel(id) { 
 
    var self = this; 
 
    self.contacts = ko.observableArray([]); 
 

 
    // make ajax call.. mocking here 
 
    var results = ajax(); 
 

 
    results.forEach(function(result) { 
 
    self.contacts.push(new Contact(result)); 
 
    }); 
 
} 
 

 
function Contact(data) { 
 
    var self = this; 
 
    self.firstName = data.firstName; 
 
    self.lastName = data.lastName; 
 
    self.company = data.company; 
 
    self.position = data.position; 
 
    self.image = data.image; 
 

 
    self.fullName = ko.pureComputed(function() { 
 
    return self.firstName + ' ' + self.lastName; 
 
    }); 
 

 
    return self; 
 
} 
 

 
function ajax() { 
 
    return [{ 
 
    firstName: 'Rich', 
 
    lastName: 'Hickey', 
 
    company: 'Cognitect', 
 
    position: 'CTO', 
 
    image: 'http://gotocon.com/dl/photos/speakers/Rich%20Hickey2.jpg' 
 
    }, { 
 
    firstName: 'Scott', 
 
    lastName: 'Hanselman', 
 
    company: 'Microsoft', 
 
    position: 'Architect', 
 
    image: 'http://www.globalnerdy.com/wordpress/wp-content/uploads/2009/09/scott_hanselman.jpg' 
 
    }]; 
 
} 
 

 
$(function() { 
 
    ko.applyBindings(new DetailViewModel()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<!-- ko foreach: contacts --> 
 
<div> 
 
    <img class="contact__image" data-bind="attr:{src: image, alt: fullName}" style="width: 100px; height: 150px" /> 
 
    <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> 
 

 
</div> 
 
<!-- /ko -->