KendoUI MVVM：在 router.navigate 之后重新加载小部件
Posted
技术标签:
【中文标题】KendoUI MVVM：在 router.navigate 之后重新加载小部件【英文标题】：KendoUI MVVM: Reload widgets after 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 上加载，但在再次调用它之后它不会重新加载。有什么方法可以实现吗？
【问题讨论】：
【参考方案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
【讨论】：
以上是关于KendoUI MVVM：在 router.navigate 之后重新加载小部件的主要内容，如果未能解决你的问题，请参考以下文章
Kendo UI，使用 MVVM 时如何从 DOM 元素获取小部件对象？
Kendo UI for jQuery使用教程：使用MVVM初始化