如何进一步 MVVM Kendo UI 小部件？

Question

使用 Kendo UI 小部件已经有一段时间了，目前正在进一步研究 MVVM 我的代码。到目前为止，我仅在使用“源”、“值”、“文本”等的特定小部件属性和事件（根据文档，这是受支持的 MVVM 绑定）上设法做到这一点。但是如果我想 MVVM 其他属性，例如窗口标题、下拉列表宽度，甚至图表数据系列，该怎么办？

我在文档中没有看到这方面的例子，我想知道这是否可能？由 kendo 原生还是通过 Angular 等第 3 方框架？

Answer 1

这是可能的，但是是的，很难找到...这是我与 Kendo MVVM 一起使用的一些示例。

窗口：

<div id="active-call-window">
    <div id="active-call"
         style="top: 75px"
         data-role="window"
         data-visible="false"
         data-enabled="true"
         data-modal="true"
         data-resizable="false"
         data-width="98%"
         data-height="88%"
         data-position="{top: '25px', left: '1%'}"
         data-bind="events: { open: onWindowOpened, close: onWindowClose }">
        <div class="col-md-12 col-xs-12">
            <div class="col-md-12 col-xs-12 padding-less" data-template="active-call-main-template" data-bind="source: this"></div>
            <script type="text/x-kendo-template" id="active-call-main-template">
                <div class="col-md-3 col-xs-3">
                    <span>Call from</span>
                    <span>#= activeCall.number #</span>
                </div>
                <div class="col-md-4 col-xs-4">
                    <span>Called service</span>
                    <span class="active-call-main-header">#= activeCall.serviceName #</span>
                </div>
                <div class="col-md-2 col-xs-2">
                    <span>Status</span>
                    <span class="active-call-main-header" style="color: #= activeCall.statusColor #">#= activeCall.status == 'ON_HOLD' ? 'ON HOLD' : activeCall.status#</span>
                </div>
                <div class="col-md-3 col-xs-3">
                    <span>Duration</span>
                    <span class="active-call-main-header">#= Util.toHHMMSS(activeCall.durationInSeconds) #</span>
                </div>
            </script>
        </div>
    </div>
</div>

JS：

var ActiveCall = (function () {
var _init = function () {
    //Bind it to element id, in that element kendo observable object will be available
    kendo.bind($('#active-call-window'), _viewModel);
};

//Make kendo observable object
var _activeCallViewModel = function () {
    return kendo.observable({
        activeCall: {},
        isMaximized: true,
        isMinimized: false,
        //Can be triggered anywhere in js
        openWindow: function () {
            //Get kendo window instance
            var window = $('#active-call');
            //Open kendo windows
            window.getKendoWindow().open();
            //Remove title section
            window.getKendoWindow().title(false);
        },
        //Event triggered on window open, check html
        onWindowOpened: function (e) {
            //console.log("test");
        },
        closeWindow: function () {
            $('#active-call').getKendoWindow().close();
        },
        onWindowClose: function () {

        },
        minimizeWindow: function () {
            if (this.get('isMaximized')) {
                this.changeWindowWidth(48, 51);
                this.set('isMinimized', true);
                this.set('isMaximized', false);
            }
        },
        maximizeWindow: function () {
            if (this.get('isMinimized')) {
                this.changeWindowWidth(98, 1);
                this.set('isMinimized', false);
                this.set('isMaximized', true);
                $('#cuc-active-calls').css('z-index', '12');
            }
        },
        isWindowOpened: function () {
            var window = $('#active-call').getKendoWindow();

            return !window.element.is(':hidden');
        },
        //Set object that is represented on view, when this change html will change too
        setActiveCall: function (call) {
            this.set('activeCall', call);
        },
        //Get kendo window class and css wraper, with this you dynamically change visualizations of window
        changeWindowWidth: function (pctWidth, pctLeft) {
            $('#active-call').getKendoWindow().wrapper.addClass('active-call-k-window');
            $('#active-call').getKendoWindow().wrapper.css({
                width: pctWidth ? pctWidth + '%' : '97%',
                left: pctLeft ? pctLeft + '%' : '2%'
            });
        },
    });
};

var _viewModel = _activeCallViewModel();

//Bind events, for example when object 'activeCall' changes catch that event and do something
_viewModel.bind('change', function (e) {
    //bind changes
});

//expose initialization and observable object publicly,
//after init you cant in any .js file call ActiveCall.viwModel.closeWindow() or any other function/property (ActiveCall.viwModel.set('isMaximized', true)) 
return {
    init: _init,
    viewModel: _viewModel
}
})();

注意： 你需要像这样设置值：this.set('name','John); not like this this.name = 'John';

希望对你有帮助！