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

Span not updated by MVVM

2 Answers 230 Views

MVVM

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

Andreas asked on 24 Feb 2016, 07:26 PM

I've been trying out the MVVM system for an upcoming project, and I seem to have a problem with understanding the basics. All of the examples/samples I've tried from the Kendo webpage have worked as intended, but my own test refuses to function.

Basically I have a span with a text value, which is changed by a button click. Simple. The problem is that, even though the ViewModel is updated (according to console print-outs), the text being displayed on the website does not.

I hope someone could have a look at this and tell me what I'm doing wrong - really is a very simple example.

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" />

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css" />

<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>

</head>

<body>

<div id="app">

<div id="replaceMe"></div>

</div>

<div>

<button id="swapButton">Swap Text</button>

</div>

<script type="text/x-kendo-template" id="template">

<div>

<span data-bind="text:displayMe">Not bound</span>

</div>

</script>

<script type="text/javascript">

var viewModel = kendo.observable({

displayMe: "Foo",

swapText: function () {

if (this.displayMe == "Foo") {

this.displayMe = "Bar";

} else {

this.displayMe = "Foo";

}

});

$("#swapButton").kendoButton({

click: function (e) {

viewModel.swapText();

console.log("Swapped Text: " + viewModel.displayMe);

}

});

var template = kendo.template($("#template").html(), { useWithBlock: false });

var templateAsHtml = template({});

$("#replaceMe").html(templateAsHtml);

kendo.bind($("#replaceMe"), viewModel);

</script>

</body>

</html>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Span not updated by MVVM

2 Answers, 1 is accepted