MVVM test

by JFlox

HTML

<link rel="stylesheet" href="https://da7xgjtj801h2.cloudfront.net/2014.1.318/styles/kendo.common.min.css">
<script src="https://da7xgjtj801h2.cloudfront.net/2013.2.716/js/kendo.all.min.js"></script>
<div id="content">
    <input data-option-label="select..." data-role="dropdownlist" data-bind="value:selectValue, source:ddlSource, events:{change:selectItem}"/>
    -----------
    <span data-bind="text:someText"></span>
    
    
    
</div>

JavaScript

$().ready(function() {

   var vmObj = {
        inputText: {boo:""},
        someText: function() {
            return vm.get('inputText.boo');
        },
        selectItem: function () {
            var selectValue = vm.get('selectValue');
            
            vm.set('inputText.boo', selectValue + 'wee');
            
        },
        ddlSource: ["foo","bar","baz"]
    }
    
    var vm = kendo.observable(vmObj);

    kendo.bind("#content", vm);


});