This is a migrated thread and some comments may be shown as answers.

How to debug mvvm clientside?

0 Answers 146 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 2
Daniel asked on 20 Sep 2012, 09:30 PM
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>

No answers yet. Maybe you can help?

Tags
MVVM
Asked by
Daniel
Top achievements
Rank 2
Share this question
or