Kendo UI Remote View

by marhaba

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<div id="main"></div>

JavaScript

(function () {
    //CREATE SIMULATED AJAX REQUEST FOR JSFIDDLE USE
    var simulatedAjax = function (url) {
        return $.post(url, {
            html: '<p>This is a remote view!</p><select data-role="dropdownlist" data-bind="source: sourceThings"></select>',
            delay: 3
        });
    };
    
    //EXTEND KENDO VIEW TO HANDLE REMOTE VIEWS
    var extendedView = kendo.View.extend({
        promise: null,
        
        init: function(element, options) {
            var me = this;
            
            //DETERMINE IF ELEMENT IS URL FOR REMOTE RETRIEVAL
            if (_.isString(element)
                && !/<[a-z][\s\S]*>/i.test(element)) {
                //GET REMOTE INITIAL VIEW
                //TODO: REPLACE WITH $.get() IN REAL USE
                this.promise = simulatedAjax(element)
                .done(function (html) {
                    //STORE REMOTE VIEW IN ELEMENT PARAM
                    element = html;
                    
                    //CALL BASE CONSTRUCTOR WITH NEW ELEMENT
                    kendo.View.fn.init.call(me, element, options);
                });
            } else {
                //NOT REMOTE VIEW SO PROCEED AS USUAL
                kendo.View.fn.init.call(this, element, options);
            }
        },
        
        render: function (container) {
            var me = this;
            
            //HANDLE AJAX REMOTE VIEW IF APPLICABLE
            if (this.promise) {
                this.promise.then(function () {
                    kendo.View.fn.render.call(me, container);
                });
            } else {     
                //NOT REMOTE VIEW SO PROCEED AS USUAL
                kendo.View.fn.render.call(this, container);
            }
        }
    });
    
    //NOW TO SEE THE EXTENDED KENDO VIEW IN ACTION!
    var view = new extendedView('/echo/html/', {
        model: kendo.observable({
            sourceThings: [
                'KendoUI remote view loaded!',
               ...