Question

我将kendo库升级到了2014Q1框架，该框架有一些很好的功能，但是当我这样做时，它完全破坏了渲染中的任何小部件（网格，tabStrip，选择列表等）。我将其跟踪到布局/视图无法激活窗口小部件而不将setTimeout设置为0.我在这里丢失了一些键或者是否以无效的方式构建了这个东西？

http://jsfiddle.net/upmFf/

我遇到的问题的基本思路如下（删除评论并且有效）：

var router = new kendo.Router();
var mainLayout = new kendo.Layout($('#mainLayout').html());
var view = new kendo.View('sample', {
     wrap: false,
     model: kendo.observable({}),
     init: function() {
          // setTimeout(function(){
              $("#datepicker").kendoDatePicker();
          // }, 0);
     }
 });

 mainLayout.render('#container');

 router.route('/', function() {
     mainLayout.showIn('#app', view);
 });

 router.start();

Answer 1

不可否认，我并不完全理解，但希望这会有所帮助。

基本上，当您尝试初始化#datepicker时，尚未将视图元素插入到DOM中。你可以在init函数中放置一个断点，当它命中时，检查DOM，你会看到#app是一个空div，而#datepicker还不存在（至少不在DOM上））。

kendo.Layout.showIn似乎需要退出以便视图完成渲染，但是当它初始化视图的元素时，它会认为渲染完成并且提前错误地触发了init。 setTimeout有效，因为它运行了kendoDatePicker初始化异步，视图能够在超时函数之前完成渲染。

<强>变通...

从视图对象本身触发视图渲染：

var view = new kendo.View('sample', {
    init: function() {
        $("#datepicker").kendoDatePicker();
    }
});
router.route('/', function() {
    view.render('#app');
});

从视图对象本身中选择并查找日期选择器：

var view = new kendo.View('sample', {
    init: function() {
        view.element.find("#datepicker").kendoDatePicker();        
    }
});
router.route('/', function() {
    mainLayout.showIn('#app', view);
});

在this thread的底部附近，我得到了第二个选项的想法。也许其他人可以到处找出最新的解释。

如果没有setTimeout，Kendo布局不会渲染小部件

1 个答案: