weixin_33725722 2015-04-28 12:46 采纳率: 0%
浏览 61

淘汰赛ViewModel更新

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)
                });
            }
        });
    }
  • 写回答

2条回答 默认 最新

  • weixin_33724059 2015-04-28 12:56
    关注

    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)
                }));
            }
        });
    }
    
    评论

报告相同问题?