JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
 test<div id="tabstrip-lesson" 
        >

        <div id="lesson">

            <div class="separator">
                <div class="dark">test</div>
                <span class="light" data-bind="text:testText"></span>
            </div>

            <ul class="forecast-list" id="lessons"
                
                data-bind="source: lessonsDataSource" 
                data-template="lessons-template">
            </ul>
        </div>
</div>

<!--Lessons Kendo Template für oben-->
<script type="text/x-kendo-template" id="lessons-template">
    ROOM<div>
        
        <h1>#=dojoroom#</h1>
        <p>#=text1#</p><!-- Text aus Json File wird ausgelesen-->   
    </div>
</script>

JavaScript

var app=[];
console.log('fred');
(function() {  
    
    var LessonsViewModel;
    
    LessonsViewModel = new kendo.data.ObservableObject({
        lessonsDataSource: "",
        testText:"fred",    
        init: function () {
            var that = this,
                dataSource;
    
            console.log($("lessons-template"));
            var template = kendo.template($("#lessons-template").html());
            console.log('template');
            dataSource = new kendo.data.DataSource({
                data:[
                    {
                        "dojoroom": "Dojo - First Room",
                        "text1": "Bla bla bla!"
                    },
                    {
                        "dojoroom": "Dojo - Second Raum",
                        "text1": "More Bla"
                    }
                ],
                change:function(){
                    console.log('change',this.view());
                    $("#lessons").html(kendo.render(template,this.view()));
                }
            });
            var that = this;
            
                that.set("lessonsDataSource", dataSource);   
            dataSource.read();
        }        
    });  
    
    console.log('fred123');
    app.lessonsService = {
        viewModel: LessonsViewModel
    };

    
    app.lessonsService.viewModel.init();
    
    console.log(app.lessonsService.viewModel.lessonsDataSource);
    console.log($("#lesson"));
   // kendo.bind($("#lesson"),app.lessonsService.viewModel);
    console.log($("#lesson"));
})();