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

Two way binding with kendo.observable

1 Answer 184 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Vijay
Top achievements
Rank 1
Vijay asked on 27 Jun 2012, 03:18 PM
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>

1 Answer, 1 is accepted

Sort by
0
Joshua
Top achievements
Rank 1
Veteran
Iron
answered on 03 Aug 2012, 10:03 PM
has anyone come up with a solution for this? i am experiencing the same thing.
Tags
MVVM
Asked by
Vijay
Top achievements
Rank 1
Answers by
Joshua
Top achievements
Rank 1
Veteran
Iron
Share this question
or