How is the right way to bind observables to a view and how to work with namespaces

[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:"type ur 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.

[Dimo]

Hello Burak,

A possible reason for kendo.bind() to not work outside device-ready, is that the view HTML markup is still not in the DOM, so the element reference fails.

In order to resolve the context issue and retrieve the URL value, configure transport.read to be a function, which returns window.Books.get("url");

http://docs.telerik.com/KENDO-UI/api/javascript/data/datasource#configuration-transport.read.url

The recommended technique to use MVVM binding in a Kendo UI Mobile Application is described in the documentation:

http://docs.telerik.com/kendo-ui/mobile/mvvm

Generally, an observable will be created automatically from the foo object, but in your case you may need to create it yourself, in order to use it in the transport.read function, as explained above.

Regards,
Dimo
Telerik

[Burak]

Hello,

I ve modified it and added the viewmode via data-model. It is now working. I have a question abaout the datasource. When the user enter a wrong url I get an error, that the url is not valid. It is ok, but when I switch to the books.html view, there is a loading icon, how can i prevent it, after a bad request is started? 

 

And another question is, if I change in books.html the Books.wrongUrl, it wont be automatically updated, since I call the Books.set('wrongUrl, someData)-Method, right? So there is no 2-way binding - like in Angular?

 

Thank you very much.

[Dimo]

Hello Burak,

The Kendo UI DataSource exposes an error event. You can use the handler to hide the loader.

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events-error

http://docs.telerik.com/kendo-ui/framework/datasource/crud#error-handling-with-remote-transport

http://docs.telerik.com/KENDO-UI/api/javascript/mobile/application#methods-hideLoading

The best way to use dynamic transport URLs for the Kendo UI DataSource is to define these URLs as functions, which can return different values at different times. Based on our previous discussion, I believe you are already doing that. Surely, there is no true two way binding, i.e. the DataSource is unable to update $scope values.

Regards,
Dimo
Telerik