How to debug mvvm clientside?

1 posts, 0 answers
  1. Daniel
    Daniel avatar
    36 posts
    Member since:
    Apr 2009

    Posted 20 Sep 2012 Link to this post

    As an example the below code is using a kendo observable with a remote datasource model and view.  I understand how to debug the ajax call to retrieve the data.  But where and how do I verify that the data matches the model, then when I bind my form to my viewModel where do I debug this is for example the dropdownbox is not filling with data even though the ajax data request was a success and see the ajax response in the debugger.  But can't tell where my error is??

        <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="js/lib/jquery/jquery-1.8.1.min.js"></script>
        <script src="js/lib/kendoui/kendo.web.min.js"></script>
        <link href="css/KendoUI/kendo.common.css" rel="stylesheet" />
        <link href="css/KendoUI/kendo.blueopal.css" rel="stylesheet" />
    </head>
    <body>
         
    <div id="example" class="k-content">
        <div id="form-container">
            <div class="demo-section">
                Select Product: <select data-role="dropdownlist" data-option-label="Select product"
                                 data-value-field="ID" data-text-field="lastName"
                                 data-bind="source: productsSource, value: selectedProduct"></select>
     
                <button data-bind="click: save, enabled: hasChanges" class="k-button">Submit All Changes</button>
            </div>
            <div class="demo-section product-info"></div>
                <ul>
                    <li><label>ID</label> <span data-bind="text:selectedProduct.ID, events: { change: change }"></span></li>
                    <li><label>Last Name</label> <input type="text" class="k-textbox" id="lname" data-bind="value: selectedProduct.lastName, events: { change: change }" /></li>
                </ul>
     
                <button data-bind="click: remove" class="k-button">Delete Product</button>
     
            </div>
        </div>
        <script>
        var crudServiceBaseUrl = "http://127.0.0.1:8081/cors";
                    var viewModel = kendo.observable({
                        productsSource: new kendo.data.DataSource({
                            transport : {
                                read:  function(operation) {
                                    //alert("begin read")
                                        $.ajax({
                                        url: crudServiceBaseUrl + "/People",
                                        dataType: "json",
                                        success: function(response) {
                                        //  debugger;
                                            //alert(response)
                                        alert("success read"); //mark the operation as successful
                                        },
                                        error: function(e){
                                            alert("error")
                                        }
                                    });
                                },
                            },
                        batch: true,
                        schema: {
                           data : "__ENTITIES",
                                model : {
                                    id : "ID",
                                    fields : {
                                        __KEY : {
                                            editable : false,
                                            nullable : true
                                        },
                                        __STAMP : {
                                            editable : false,
                                            nullable : true
                                        },
                                        ID : {
                                            editable : false,
                                            nullable : true
                                        },
                                        firstName : {
                                            validation : {
                                                required : true
                                            }
                                        },
                                        lastName : {
                                            validation : {
                                                required : true
                                            }
                                        }
                                    }
                                }
                        }
                    }),
                    selectedProduct: null,
                    hasChanges: false,
                    save: function() {
                        this.productsSource.sync();
                        this.set("hasChanges", false);
                    },
     
     
                    remove: function() {
                        if (confirm("Are you sure you want to delete this product?")) {
                            this.productsSource.remove("1");
                           // this.set("selectedProduct", this.productsSource.view()[0]);
                            this.change();
                        }
                    },
                    // showForm: function() {
                       // return this.get("selectedProduct") !== null;
                    // },
     
                    change: function() {
                        this.set("hasChanges", true);
                    }
                });
                alert("bind")
               
                  kendo.bind($("#form-container"), viewModel);
              
                    </script>
                    </body>
    </html>
Back to Top