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

4 posts, 1 answers
  1. Burak
    Burak avatar
    4 posts
    Member since:
    Aug 2015

    Posted 04 Sep 2015 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 08 Sep 2015 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Burak
    Burak avatar
    4 posts
    Member since:
    Aug 2015

    Posted 09 Sep 2015 Link to this post

    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.

  5. Answer
    Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 11 Sep 2015 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready