Jqwidgets MVVM debugging

Jqwidgets MVVM debugging

by delebash

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.classic.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/demos/sampledata/beverages.txt"></script>
   <div id='jqxWidget'>
        <div id="grid">
        </div>
    </div>

JavaScript

$(document).ready(function () {

            var url = 'beverages.txt';

            var GridModel = function () {
                this.items = ko.observableArray();
                var me = this;
                $.ajax({
                    datatype: 'json',
                    url: 'beverages.txt'
                }).done(function (data) {
                    var jsonData = $.parseJSON(data);
                    me.items(jsonData);
                });
            };

            var model = new GridModel();

            // prepare the data
            var source =
            {
                datatype: "observablearray",
                datafields: [
                    { name: 'name' },
                    { name: 'type' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat' },
                    { name: 'protein' },
                ],
                id: 'id',
                localdata: model.items
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#grid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: 'classic',
                columns: [
                  { text: 'Name', datafield: 'name', width: 250 },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                  { text: 'Calories', datafield: 'calories', width: 180 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                  { text: 'Protein', datafield: 'protein', minwidth: 120 }
                ]
            });

            ko.applyBindings(model);
        });