淘汰赛ViewModel更新

Question

I am new to Knockout and I am trying to update my ViewModel from an ajax call.
This is what I have right now:

LoanDeductions.js

var deductionLine = function (deductionID, deductionName, amount) {
    self = this;
    self.deductionID = ko.observable(deductionID);
    self.deductionName = ko.observable(deductionName);
    self.amount = ko.observable(amount);
};

function LoanDeductions(deductions) {
    var self = this;
    self.loanDeductions = ko.observableArray(ko.utils.arrayMap(deductions, function (deduction) {
        return new deductionLine(deduction.deductionID, deduction.deductionName, deduction.amount)
    }));

    // Operationss
    self.removeLine = function (line) { self.loanDeductions.remove(line) };
};

and this is my scripts in my view:

    @section scripts
    {
        <script src="~/Scripts/koModel/LoanDeductions.js"></script>
        <script type="text/javascript">
           var updateValues = function () {
               $.ajax({
               'url': '@Url.Action("UpdateDeductionValues","LoanApp")',
               'data': { amount: $('.LoanAmount').val() },
               'success': function (result) {// update viewmodel scripts here}
            });
            var viewModel = new LoanDeductions(@Html.Raw(Model.CRefLoansDeductions2.ToJson()));
            $(document).ready(function () {
                ko.applyBindings(viewModel);
                $('.datepicker').datepicker();
                $('.LoanAmount').change(function () {
                   updateValues();
                };
            });
        });
    </script>
    }

So, in my view, I have a dropdown list with class name "LoanAmount" which when value is changed, it will perform an ajax call, send the selected loanAmount value to the server, recompute the deduction amounts, then the server returns a jsonresult that looks like this:

"[{\"deductionID\":1,\"deductionName\":\"Loan Redemption Fee\",\"amount\":53.10},{\"deductionID\":2,\"deductionName\":\"Document Stamp\",\"amount\":9.00}]"

Now what I wanted to do is use this json data as my new viewModel.
Can anyone show me the way how to do this, please note that I manually mapped my viewmodel and didn't used the ko mapping plugin.
Any help will be greatly appreciated. Thank you, more power!

EDIT (in response to Fabio)

function updateData() {
        $.ajax({
            url: '@Url.Action("UpdateDeductionValues","LoanApp")',
            data: { amount: self.selectedLoanAmount() },
            success: function (deductions) {
                //load your array with ko.utils.arrayMap
                ko.utils.arrayMap(deductions, function (deduction) {
                return new deductionLine(deduction.deductionID, deduction.deductionName, deduction.amount)
                });
            }
        });
    }

Answer 1

Not sure If I understood your problem, but if you want to change model values outside of the class, you need to do something like this:

        $(document).ready(function () {
            var viewModel = new LoanDeductions(@Html.Raw(Model.CRefLoansDeductions2.ToJson()));
              ko.applyBindings(viewModel);

            $('.datepicker').datepicker();

            function updateValues() {
                //do you ajax call
                //update the model using viewModel.loanDeductions(newItens);
            };

            $('.LoanAmount').change(function () {
               updateValues();
            };
        });

EDIT 1 - Just to show how to use knockout without jquery.change

function LoadDeductions() {
     //declare you properties
      var self = this;
      self.loanAmount = ko.observable('initialvalueofloanamount');
      self.loanDeductions = ko.observableArray();

     //create a function to update you observablearray
     function updateData() {
        $.ajax({
           url: '@Url.Content('yourActionhere')' or '@Url.Action('a', 'b')',
           data: { amount: self.loadAmount() },
           success: function (deductions) {
              //load your array with ko.utils.arrayMap
           }
        });
     }

     //everytime that loanAmount changes, update the array
     self.loanAmount.subscribe(function () {
        updateData();
     });

     //update values initializing
     updateData();

};

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

Bind the select in the HTML

<select data-bind="value: loanAmount"></select>

EDIT 2 - To your second problem

function updateData() {
    $.ajax({
        url: '/LoanApp/UpdateDeductionValues', //try to write the url like this
        data: { amount: self.selectedLoanAmount() },
        success: function (deductions) {
            //load your array with ko.utils.arrayMap
            self.loanDeductions(ko.utils.arrayMap(deductions, function (deduction) {
                 return new deductionLine(deduction.deductionID, deduction.deductionName, deduction.amount)
            }));
        }
    });
}