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

Question

一直在使用Kendo UI小部件，目前正在寻找MVVM我的代码。到目前为止，我设法只在使用'source'，'value'，'text'等特定小部件属性以及事件（根据文档提供支持的MVVM绑定）上执行此操作。但是，如果我想MVVM其他属性，如窗口标题，下拉宽度，甚至图表数据系列，该怎么办？

我没有在文档中看到这个例子，我想知道这是否可行？本地由剑道或通过第三方框架，如Angular？

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);不喜欢这个this.name = 'John';

希望能帮助到你！