Question

我正在尝试在typescript中实现MVVM事件绑定。以下是在javascript中为我工作： - （点击事件除外??）

<div id="config" data-role="view" data-layout="default" data-title="Config" data-model="viewModelConfig"
     data-bind="click: onClick, events: { init: onViewInit, show: onViewShow, beforeShow: onBeforeShow }">
    <h2>Configuration!</h2>
</div> 

<script>
    var viewModelConfig;

    var app = new kendo.mobile.Application(document.body,
    {
        platform: 'ios',
        hideAddressBar: true,
        initial: "home",
        transition: 'overlay:up',
        init: function () {

            viewModelConfig = kendo.observable({

                onClick: function (e) {
                    console.log("onClick");
                },

                onViewInit: function (e) {
                    console.log("ViewModel:onViewInit");
                },

                onViewShow: function (event) {
                    console.log("ViewModel:onViewShow");
                },

                onBeforeShow: function (event) {
                    console.log("ViewModel:onBeforeShow");
                }
            });
        }
    });
</script>

下面是我的打字稿版本，除了点击工作之外没有任何事件触发？这是怎么回事？

 <div id="config" data-role="view" data-layout="shared-layout" data-title="Config"
     data-bind="click: onClick, beforeShow: onBeforeShow, init: onViewInit, events: { show: onViewShow }">
    <h2>Configuration</h2>
</div>

...

require(['jquery', 'kendo', 'telerikReportViewer', 'app/AppMain'], ($, kendo, TRV, AppMain) => {
var viewModelConfig:any;

window.onerror = function (event: Event, source: string, fileno: number, columnNumber: number) {
    alert("Error:" + event.type + " source:" + source);
}

var app = new kendo.mobile.Application(document.body,
    {
        icon: "Content/images/prpsolutions_logo.png",
        platform: 'ios',
        hideAddressBar: true,
        initial: "home",
        transition: 'overlay:up',
        init: function () {

            viewModelConfig = kendo.observable({

                onClick: function (e) {
                    console.log("viewModelConfig:onClick");
                },

                onViewInit: function (e) {
                    console.log("viewModelConfig:onViewInit");
                },
                onViewShow: function (event) {
                    console.log("viewModelConfig:onViewShow");
                },
                onBeforeShow: function (event) {
                    console.log("viewModelConfig:onBeforeShow");
                }
            });
            kendo.bind($("#config"), viewModelConfig, kendo.mobile.ui.View);
        }
    });
});

Answer 1

我已经弄清楚了。

在Typescript的情况下，我不知道如何从HTML引用viewModelConfig变量（MVVM data-model =＆＃34; viewModelConfig＆＃34;）。所以使用手动绑定（使用kendo.bind（$（＆＃34; #config＆＃34;），viewModelConfig）） - 这没有用！

但是如果我将viewModelConfig内联到我的启动函数外部，HTML就可以看到该变量。

declare var viewModelConfig: any;

require(['jquery', 'kendo', 'telerikReportViewer', 'app/AppMain'], ($, kendo, TRV, AppMain) => {

var app = new kendo.mobile.Application(document.body,
    {
        transition: 'overlay:up',
        init: function () {

            viewModelConfig = new kendo.observable({

                onClick: function (e) {
                    console.log("viewModelConfig:onClick");
                },

                onViewInit: function (e) {
                    console.log("viewModelConfig:onViewInit");
                },
                onViewShow: function (event) {
                    console.log("viewModelConfig:onViewShow");
                },
                onBeforeShow: function (event) {
                    console.log("viewModelConfig:onBeforeShow");
                }
            });
etc.

它现在有效。

打字稿Kendo ui移动MVVM事件之前不会触发

1 个答案: