knockoutjs - ko.mapping.fromJS не работает

Question

Я только что начал пробовать knockout.js. Ko.mapping предлагает отличный способ получить и отобразить данные с сервера. Однако я не могу заставить отображение работать.

У меня есть простая модель:

//var helloWorldModel; 
var helloWorldModel = { 
    name: ko.observable('Default Name'), 
    message: ko.observable('Hello World Default') 
}; 


$(document).ready(function() { 
    ko.applyBindings(helloWorldModel); 
     //a button on the form when clicked calls a server class 
     //to get json output 
    $('#CallServerButton').click(getDataFromServer); 
}); 

function getDataFromServer() { 
    $.getJSON("HelloSpring/SayJsonHello/chicken.json", function(data) { 
    mapServerData(data); 
    }); 
} 

function mapServerData(serverData) { 
    helloWorldModel = ko.mapping.fromJS(serverData, helloWorldModel); 
    alert(JSON.stringify(serverData)); 
} 

helloWorldModel имеет только два атрибута - одно и то же я вернуться с сервера. Оповещение в mapServerData показывает -

{"name":"chicken","message":"JSON hello world"} 

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

Также обратите внимание, если я не объявить модель заранее и использовать

helloWorldModel = ko.mapping.fromJS(serverData); 

это отображение данных в моей форме правильно.

Answer 1

Из ответа Ричарда, а затем немного больше исследований по этому вопросу, я думаю, что способ, которым я инициализировал модель, неверен. Я предполагаю, что нельзя использовать существующую модель представления, а затем ожидать, что она будет работать с плагином mapper. Таким образом, вместо инициализации вида модели с необработанными данными в формате JSON с использованием ko.mapping.fromJS:

var helloWorldModel; 

$(document).ready(function() { 
    var defaultData = { 
     name: 'Default Name', 
     message: 'Hello World Default' 
    }; 

    helloWorldModel = ko.mapping.fromJS(defaultData); 
    ko.applyBindings(helloWorldModel); 
    $('#CallServerButton').click(getDataFromServer); 
}); 

function getDataFromServer() { 
    $.getJSON("HelloSpring/SayJsonHello/chicken.json", function(data) { 
    mapServerData(data); 
    }); 
} 

function mapServerData(serverData) { 
    alert(JSON.stringify(serverData)); 
    ko.mapping.fromJS(serverData, helloWorldModel); 
} 

Этот код работает и обеспечивает ожидаемое поведение

Answer 2

Вы не можете просто перезаписать свою модель, переназначив ее таким образом.

Когда вы делаете:

ko.applyBindings(helloWorldModel);

Вы говорите, "привязать модель helloWorldModel к странице". Нокаут затем просматривает и подключает наблюдаемые в этой модели и связывает их со страницей.

Теперь, когда вы перезаписать форму модели здесь:

helloWorldModel = ko.mapping.fromJS(serverData, helloWorldModel);

Он переписав модель объект с совершенно новым объектом с совершенно новыми наблюдаемыми в нем.

Чтобы исправить это вам нужно изменить эту строку просто:

ko.mapping.fromJS(serverData, helloWorldModel);

Это заботится о свойствах внутри модели и перераспределяет их для вас, без перезаписи модели.