Mapping not working in knockout with the button click

Question

Mapping not working in knockout with the button click,

I have used mapping in knockout, while changing input text value when clicking button not changed properly. Need to change value for name input text after click load user data button

Here my code,

    <div class='sample'>
    <p>Load: <input type="button" value="Load User Data" data-bind="click: loadUserData" /></p>
    <p>Name: <input data-bind='value: firstName' /></p>
    <p>Save: <input type="button" value="Save User Data" data-bind="click: saveUserData" /></p>
</div>
<script>
    $(document).ready(function () {
        var viewModel = {};
        viewModel.firstName = 'Knockout JS';
        viewModel.loadUserData = function () {
            $.getJSON("/data.json", function (data) {
                // update the data in existing ViewModel.
                viewModel.firstName = data.name;
                ko.mapping.fromJS(data, viewModel);

            });
        };
        viewModel.saveUserData = function () {
            // Convert the viewModel into JSON.
            var data_to_send = { userData: ko.toJSON(viewModel) };
            // Send that JOSN data to server.
            $.post("WebService.asmx/updateData", data_to_send, function (data) {
                alert("Your data has been posted to the server!");
            });
        };
        ko.applyBindings(viewModel);
    });
</script>

Did i anything wrong?

Answer 1

In order to make it update the UI, you need to make the firstName observable.

Then when you want to modify an observable value, you need to treat that as a function and pass the new value as an argument like this firstName('newValue')

See the link here to get more information and a sample below:

var masterVM = (function () {
  var self = this;      
  self.firstName = ko.observable("Knockout JS");
  self.loadUserData = function() {
    var currentName = self.firstName();
    self.firstName(currentName + "Updated");
  }
})();

ko.applyBindings(masterVM); 

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

<p>Load: <input type="button" value="Load User Data" data-bind="click: loadUserData" /></p>
<p>Name: <input data-bind='value: firstName' /></p>