Two way binding with kendo.observable

2 posts, 0 answers
  1. Vijay
    Vijay avatar
    2 posts
    Member since:
    May 2012

    Posted 27 Jun 2012 Link to this post

    In the below piece of code the binding seems to be one way - Model to View. However when the element value is modified the corresponding Model value is not updated. 

    The Input fields load the data from the array correctly but after the data has been modified in the input fields the variables "viewModel"  and "data" are not updated. (Modify the name of Perry Sofa and click the "click" button below.)

    Is there anyway I can achieve two way binding - (Model to View and View to Model)? Apologies in advance for using relative paths of the kendo and jquery js files.

    <!DOCTYPE html>
    <html>
    <head>
        <title>Source and template binding</title>
        <script src="../../../js/jquery.min.js"></script>
        <script src="../../../js/kendo.web.min.js"></script>
         <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
        <link href="../../../styles/kendo.default.min.css" rel="stylesheet" />
        <script>
        var data;
        var viewModel;
        function showVM()
        {
        alert(viewModel.get('products[1].name'));
        }
        </script>
        <script id="template" type="text/x-kendo-template">
        <div>
        <input type="text" data-bind="text: name" value="${name}"></input><br>
        <input data-bind="text: unitsInStock" value="${unitsInStock}"></input><br>
        <button class="k-button" data-bind="click: deleteProduct">Delete</button><br>
    </div>    
        </script>
    </head>
    <body>
        <div id="example" class="k-content">
        <div data-template="template" data-bind="source: products"></div>
    <script>
        $(document).ready(function() {
        data = [
                    { name: "Hampton Sofa", price: 989.99, unitsInStock: 39 },
                    { name: "Perry Sofa", price: 559.99, unitsInStock: 17 },
                    { name: "Donovan Sofa", price: 719.99, unitsInStock: 29 },
                    { name: "Markus Sofa", price: 839.99, unitsInStock: 3 }
                ];
            viewModel = kendo.observable({
                products: data
            });
            kendo.bind($("#example"), viewModel);
        });
        </script>   
    <input type="button" onclick="showVM()" value="click"/>
    </div>
    </body>
    </html>
  2. Joshua
    Joshua avatar
    83 posts
    Member since:
    May 2012

    Posted 03 Aug 2012 Link to this post

    has anyone come up with a solution for this? i am experiencing the same thing.
Back to Top