Question

我想知道在导航到包含MVVM的脚本后，是否有一种方法可以在使用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路由器来访问＆＃34; / index＆＃34;。

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 =＆＃34; view_content＆＃34;的div中。问题是，小部件每次都没有重新加载＆＃34; / index＆＃34;被访问。小部件首先加载到document.ready，但在再次调用它之后，它不会重新加载。有没有办法实现这个目标？

Answer 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();
});

Answer 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

2 个答案: