knockout mapping

knockout mapping function in viewmodel

HTML

<script src="https://cdn.rawgit.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<body>
    <h1 data-bind="text:title"></h1>
    <div data-bind="foreach: rows">
        <table>
            <tr>
            <td data-bind="text : id"></td>
            <td data-bind="text: x">gv</td>
            <td data-bind="text: y">ggf</td>
            <td data-bind="text: z">ggf</td>
                <td><button type="button" data-bind="click: mthd">btn</button></td>
            </tr>
        </table>
    </div>
    <button type="button" data-bind="click: on_click">button</button>
</body>

JavaScript

var viewModel = function(){
    var self = this;
    self.title = ko.observable('Hello World');
    self.rows = ko.observableArray();
        
    self.on_click = function(){
        alert('Hello World');
        var data = [
            {
                id : 1,
                x : 1,
                y : 2,
                z : 3,
            },
            {
                id : 2,
                x : 4,
                y : 5,
                z : 6,
            },
            {
                id : 3,
                x : 7,
                y : 8,
                z : 9,
            }
        ];
        self.rows(ko.unwrap(ko.mapping.fromJS(data, viewModelRow)));
        alert(self.rows());
        
    };
};

var viewModelRow = function(){
    var self = this;
    self.id = ko.observable();
    self.x = ko.observable();
    self.y = ko.observable();
    self.z = ko.observable();
    self.mthd = function(){
        alert('Just Clicked');
    };
};
vm = new viewModel();
ko.applyBindings(vm);