0

在我的项目中，页面已经通过使用带有 KendoUI 库的 MarionetteJS 布局开发，在此应用程序视图中我想仅在特定视图中实现 Kendo MVVM，这可能吗？还是我需要寻找手动事件处理和重新渲染视图？

作为我在下面尝试的示例，我在 MarionetteJS 上没有太多技能，所以请告诉我其他可能的更好方法。

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>

提前谢谢了！！

4

1 回答 1

1

你能试试这个吗？

<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>

而java脚本内容是：

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);

[答案]更新小提琴：

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

于 2014-08-19T06:42:49.383 回答