KnockoutJS：在使用ko.toJSON（this）时，初始值不会发布到服务器？ [英] KnockoutJS : initial values are not posted to server when using ko.toJSON(this)?

问题描述

 函数PersonViewModel（）{
 //数据成员
 this.Name = ko.observable（）; 
 this.Function_Id = ko.observable（）; 
 this.SubFunction_Id = ko.observable（）; 
 this.Functions = ko.observableArray（）; 
 this.SubFunctions = ko.observableArray（）; 
 
 //当函数改变时，更新SubFunctions选项
 this.Function_Id.subscribe（function（id）{
 this.GetSubFunctions（id）; 
} ， 这个）; 
 
 //从服务器获取数据的函数
 this.Init = function（）{
 this.GetFunctions（）; 
 this.Function_Id（'@（Model.Function_Id）'）; 
}; 
 
 this.GetFunctions = function（）{
 var vm = this; 
 $ b $ .getJSON（
'@ Url.Action（GetFunctions，Function）'，
函数（数据）{
 vm.Functions（data ）; 
} 
）; 
}; 
 
 this.GetSubFunctions = function（Function_Id）{
 var vm = this; 
 if（Function_Id！= null）{
 $ .getJSON（
'@ Url.Action（GetSubFunctions，Function）'，
 {Function_Id：Function_Id}， 
函数（数据）{
 vm.SubFunctions（data）; 
} 
）; 
} 
 else {
 vm.SubFunction_Id（0）; 
 vm.SubFunctions（[]）; 
} 
}; 
 
 this.Save = function（）{
 var PostData = ko.toJSON（this）; 
 
 var d = $ .dump（PostData）; 
 alert（d）; 
 
 $ .ajax（{
 type：'POST'，
 url：'/ Person / Save'，
 data：PostData，
 contentType： 'application / json'，
 success：function（data）{
 alert（data）; 
} 
}）; 
}; 
 
 $ b $（document）.ready（function（）{
 var personViewModel = new PersonViewModel（）; 
 personViewModel.Init（）; 
 
 ko.applyBindings（personViewModel）; 
}）; 
  

点击提交按钮时，选择列表中的数据会被发布，但不是'Function_Id '。

当我在功能下拉列表中选择一个不同的值，并点击提交按钮时，'Function_Id'的值被正确发布。

如何解决这个问题？

解决方案

这是因为这个关键字的范围javascript

  this.Init = function（）{
 this.GetFunctions（）; // This === PersonViewModel.Init 
 this.Function_Id（'@（Model.Function_Id）'）; //调用PersonViewModel.Init.Function_Id（...）
}; 
  

您应该将参考存储在PersonViewModel实例中。

  var self = this; 
 self.Init = function（）{
 self.GetFunctions（）; 
 self.Function_Id（'@（Model.Function_Id）'）; //调用PersonViewModel.Function_Id（...）
}; 
  

I've this javascript viewmodel defined:

function PersonViewModel() {
    // Data members
    this.Name = ko.observable();
    this.Function_Id = ko.observable();
    this.SubFunction_Id = ko.observable();
    this.Functions = ko.observableArray();
    this.SubFunctions = ko.observableArray();

    // Whenever the Function changes, update the SubFunctions selection
    this.Function_Id.subscribe(function (id) {
        this.GetSubFunctions(id);
    }, this);

    // Functions to get data from server
    this.Init = function () {
        this.GetFunctions();
        this.Function_Id('@(Model.Function_Id)');
    };

    this.GetFunctions = function () {
        var vm = this;

        $.getJSON(
            '@Url.Action("GetFunctions", "Function")',
            function (data) {
                vm.Functions(data);
            }
        );
    };

    this.GetSubFunctions = function (Function_Id) {
        var vm = this;
        if (Function_Id != null) {
            $.getJSON(
                '@Url.Action("GetSubFunctions", "Function")',
                { Function_Id: Function_Id },
                function (data) {
                    vm.SubFunctions(data);
                }
            );
        }
        else {
            vm.SubFunction_Id(0);
            vm.SubFunctions([]);
        }
    };

    this.Save = function () {
        var PostData = ko.toJSON(this);

        var d = $.dump(PostData);
        alert(d);

        $.ajax({
            type: 'POST',
            url: '/Person/Save',
            data: PostData,
            contentType: 'application/json',
            success: function (data) {
                alert(data);
            }
        });
    };
}

$(document).ready(function () {
    var personViewModel = new PersonViewModel();
    personViewModel.Init();

    ko.applyBindings(personViewModel);
});

When the Submit button is clicked, the data from the select lists is posted, but NOT the 'Function_Id'.

When I choose a different value in the Function dropdown list, and the click the Submit button, the value for 'Function_Id' is correctly posted.

How to fix this ?

解决方案

It's because the scope of the this keyword in javascript

this.Init = function () {
    this.GetFunctions(); // this === PersonViewModel.Init
    this.Function_Id('@(Model.Function_Id)'); // calls PersonViewModel.Init.Function_Id(...)
};

You should store the refrence to the PersonViewModel instance.

var self = this;
self.Init = function () {
    self.GetFunctions();
    self.Function_Id('@(Model.Function_Id)'); // calls PersonViewModel.Function_Id(...)
};

这篇关于KnockoutJS：在使用ko.toJSON（this）时，初始值不会发布到服务器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！