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>
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
0
Joshua
Top achievements
Rank 2
Iron
Veteran
Iron
Rank 2
Iron
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.