KendoUI MVVM：在 router.navigate 之后重新加载小部件答案

【问题标题】：KendoUI MVVM: Reload widgets after router.navigateKendoUI MVVM：在 router.navigate 之后重新加载小部件
【发布时间】：2016-05-15 02:19:43
【问题描述】：

我想知道在导航到包含 KendoUI 小部件的脚本后，是否有办法在使用 MVVM 时重新加载 KendoUI 小部件。例如，假设我们有：

<div id="view_content"></div>

<script id="index" type="text/x-kendo-template">
  <span id="info-notification"
        data-role="notification">
  </span>
</script>

我们设置了一个 KendoUI 路由器来访问“/index”。

var router = new kendo.Router();

router.route("/index", function() {
    var index = new kendo.View('index');

    index.render("#view_content");
});

router.start();
router.navigate("/index");

这会将脚本加载到 id="view_content" 的 div 中。问题是，每次访问“/index”时都不会重新加载小部件。该小部件首先在document.ready 上加载，但在再次调用它之后它不会重新加载。有什么方法可以实现吗？

【问题讨论】：

标签： javascript html mvvm kendo-ui

【解决方案1】：

您可以使用 Kendo UI View show() 事件重新加载小部件。

<body>
    <div id="application"></div>

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

    <script id="index" type="text/x-kendo-template">
        <!-- Widgets here -->
    </script>

</body>


var layoutModel = kendo.observable({

});

var indexModel = kendo.observable({

});

var main = new kendo.Layout('main', { 
    model: layoutModel
});

var indexView = new kendo.View('index', {
    model: indexModel,
    show: function () {
        // update widget here
    }
});

var router = new kendo.Router({
    init: function () {
        main.render('#application');
    }
});

var router = new kendo.Router();

router.route("/index", function() {
    main.showIn('#content', indexView);
});

$(function () {
    router.start();
});

【讨论】：

感谢您为我指明正确的方向。我找到了解决办法。
我编辑了我的答案。现在是 Kendo SPA 应用程序路由的工作原理
比我的更完整的答案。谢谢！

【解决方案2】：

这是我找到的解决方案。如果有人找到更好的，我会改变它。要在调用 View 时重新加载，我必须将模型作为参数传递给 View 实例化。

var router = new kendo.Router();

router.route("/index", function() {
    var index = new kendo.View('index',{
       model: myNotificationModel //Model to reload instance
    });

    index.render("#view_content");
});

router.start();
router.navigate("/index");

欲了解更多信息，请参阅此处：http://docs.telerik.com/kendo-ui/api/javascript/view#configuration-model

【讨论】：