[Solved] Best practice to bind observable data to a view and globals

[Burak]

Hello Guys,

I have minified my example. I have some views with its viewmodel and globals. 

Here is a part of my view: 

     

<div >
    <div id="UrlIndex" align="center" class="v-center">
        <label for="icon-right">
            <h4>Enter the URL</h4>
        </label>
        <span class="k-textbox k-space-right" style="width:70%" >
            <input class="k-textbox" type="text" id="icon-right"  data-bind="value: url" />
            <a href="#" class="k-icon k-i-search"></a>
        </span>
    </div>
</div>

 Here is the viewModel for this View:

 

(function () {
    var app;

    window.Books = kendo.observable({
       url:"Enter the url",
        data: new kendo.data.DataSource({
            transport: {
                read: this.get("url")


            },
        schema: {
            data: "books"
        }
    }),

        test: function(){

        }

    });
   kendo.bind($("#UrlIndex"), window.Books);
    document.addEventListener("deviceready", function () {
        navigator.splashscreen.hide();


        app = new kendo.mobile.Application(document.body,{layout: "main-layout"});
    }, false);

    window.app = app;
}());

 

This is the way i did the namespace and the viewmodel. Is there a better way to do this ? And another problem is that the binding to the view of

kendo.bind($("#UrlIndex"), window.Books);

only works if it is inside the device-ready function. Can you tell me what is the right, efficient and common way to do this. Can u give an example how to works with namespaces and observables. If I wrap the document ready function at the beginning it still is not binding. 

 

Another problem is this:

read: this.get("url")

It doesnt get the url, how is the right way. Thank you.

[Petyo]

Hello Burak,

the recommended way to use MVVM in a mobile application is through the data-model attribute - check the documentation.

Regarding your last question - the syntax you have employed (while valid javascript) is not what you would expect - the this.get("url") will be invoked in the global context, and will result in a JavaScript error.  

Regards,
Petyo
Telerik