Knockoutのオブザーバブルを使用した ビューモデルのデータを、サーバーサイドに渡したい場合、JSON形式など適切な形式に変換する必要があります。今回はビューモデルをプレーンなJavascriptオブジェクトやJSON形式に変換する toJS(), toJSON() メソッドを使うサンプルの覚書を記載します。

プレーンなJavascriptを使用している場合は jQueryの serialize を使って フォームデータをシリアライズしたり、 JSON.stringify を使ってJavascriptオブジェクトをJSON形式に変換して必要なデータ形式に変換できます

動作確認は KnockoutJS 3.3 を使用しています。

サンプルコード自体は簡単です。KnockoutJSを使用すると ビューモデル と ビューを分離できることからビューは定義せずに単純に変換するコードを記載しています。toJS()はプレーンなJavascriptオブジェクトに変換します。 toJSON() はJSON形式に変換します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="/Scripts/knockout-3.3.0.js"></script>
    <script type="text/javascript">
        function viewModel() {
            var self = this;
            
            self.text1 = 'Sample Text1';
            self.text2 = ko.observable('Sample Text2');
            self.check1 = ko.observable(true);
            self.check2 = false;
            self.array1 = ["Tokyo", "Aichi"];
            self.array2 = ko.observableArray(["male", "female"]);
        }

        var vm = new viewModel();
        console.log("プレーンなJavascriptオブジェクトに変換");
        console.log(ko.toJS(vm));
        console.log(ko.toJS(vm).text1);
        console.log(ko.toJS(vm).text2);
        console.log("JSON形式に変換");
        console.log(ko.toJSON(vm));
    </script>
</body>
</html>