This is a migrated thread and some comments may be shown as answers.

Best practice to bind observable data to a view and globals

1 Answer 73 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Burak
Top achievements
Rank 1
Burak asked on 04 Sep 2015, 06:52 PM

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.

1 Answer, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 08 Sep 2015, 07:09 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Burak
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Share this question
or