Is it possbile to use Kendo MVVM inside of MarionetteJS ItemView or Layout?

Question

In my project, page is already developed by using MarionetteJS Layouts with KendoUI libraries, inside this application views I would like to implement Kendo MVVM only in specifc views, is this possible? or should I need to look for manual event handling and rerendering the views?

As a sample I tried like below, I don't have much skill on MarionetteJS, so please advise me on the possible other better approaches.

http://jsfiddle.net/KendoDev/jcDYN/14/

<header>
<h2>Kendo MVVM with Marionette</h2>
    <script type="text/html" id="sample-template">    
    <%= value1 %></br>    
   <label> Duration:  </label>
   <input id="Duration" type="text" data-bind="value: DurationValue" />   
    <button id="myButton">Increase Duration</button>
</script>

</header>

<div id="container"class="well">
<div>

Many thanks in advance!!

Answer 1

Can you try this?

<header>
<h2>Kendo MVVM with Marionette</h2>
    <script type="text/html" id="sample-template">    
    <%= value1 %></br>    
   <label> Duration:  </label>   
    <button id="myButton">Increase Duration</button>
</script>
</header>
<input id="Duration" type="text" data-bind="value: DurationValue" />   
<div id="container"class="well">
<div>

And the java script content is:

var SampleView = Backbone.Marionette.ItemView.extend({
    template : "#sample-template",
    events :{
    "click #myButton" : "IncreaseDuration"
    }, 
    IncreaseDuration : function () {
      var value = parseInt(viewModelDuration.get("DurationValue"));
        value = value+1;
        viewModelDuration.set("DurationValue",value);
    }                                                    
});

   var viewModelDuration = new kendo.data.ObservableObject({                           
   DurationValue: 1                       
   });
var value = parseInt(viewModelDuration.get("DurationValue"));
var SampleModel = Backbone.Model.extend({
    defaults : {
        value1 : value, //"Value From viewModelDuration",  How to assign??    
    }
});
var sampleModel = new SampleModel();
viewModelDuration.bind("change", function(e) {    
    value = parseInt(viewModelDuration.get("DurationValue"));  
    sampleModel.set({value1: value}); 
    sampleView.render();
    });

var sampleView = new SampleView({
    model:sampleModel, 
    el : '#container'
});
sampleView.render();
kendo.bind($("#Duration"), viewModelDuration);

[Answer] Updated Fiddle:

http://jsfiddle.net/KendoDev/jcDYN/15/