ListView and MVVM

8 posts, 0 answers
  1. Kakone
    Kakone avatar
    65 posts
    Member since:
    Jan 2010

    Posted 26 Mar 2012 Link to this post

    Hello,

    I'm trying to bind the Kendo UI Mobile ListView to a datasource in a viewmodel :

    HTML :
    <ul id="projectsListView" data-role="listview" data-style="inset" data-template="list-template" data-bind="source: projects">
    </ul>
    <script id="list-template" type="text/x-kendo-template">
        <strong>#: Number #</strong> - #: Object #
    </script>
    Javascript :
    var viewModel = kendo.observable({
                projects: new kendo.data.DataSource(
                    {
                        type: "odata",
                        transport: {
                            read: url
                        }
                    })
            });
    kendo.bind($("#projectsListView"), viewModel);

    But, it doesn't work, the content of my listview is :
    function Number() { [native code] } - function Object() { [native code] }

    What am I doing wrong ?

    Cordially,
    Kakone.
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 27 Mar 2012 Link to this post

    Hello Stéphane,

    Number and Object are JavaScript primitives and in case they match your model fields name, you could use data.Number and data.Object to access them. For example:
    <script id="list-template" type="text/x-kendo-template">
        <strong>#: data.Number # </strong> - #: data.Object #<br/>
    </script>

    I hope this will help. 

      
    Regards,
    Iliana Nikolova
    the Telerik team
    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. Kakone
    Kakone avatar
    65 posts
    Member since:
    Jan 2010

    Posted 27 Mar 2012 Link to this post

    Hello,

    it doesn't work. If I use data.Number and data.Object, now, in my listview, I obtain :
    undefined - undefined

    So, I tried different things. If I don't bind the listview to my viewmodel and I do this :
    $("#projectsListView").kendoMobileListView({
      dataSource: myODataDataSource,
      style: "inset",
      template: "<strong>${Number}</strong> - ${Object}"
    })
    it works well.

    Or, if I replace the viewmodel like this :
    var viewModel = kendo.observable({
      projects:  [
        { Object: "Test 1", Number: 1 },
        { Object: "Test 2", Number: 2 }
      ]
    });
    it works well too.

    It doesn't work only when I try to bind the listview source to a KendoUI DataSource.

    Cordially,
    Kakone.
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 30 Mar 2012 Link to this post

    Hi Kakone,

    I examined the code you sent and it looks OK. I believe the problem is caused by the data you use in the project. Please check if the format and the fields definition match the raw data correctly.

    Greetings,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Kakone
    Kakone avatar
    65 posts
    Member since:
    Jan 2010

    Posted 04 Apr 2012 Link to this post

    Hi,

    The problem is not caused by the data. This is a complete sample that doesn't work with the OData sample service :
    <!DOCTYPE html>
    <html>
    <head>
        <title>Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" />
        <script src="jquery.min.js"></script>
        <script src="js/kendo.mobile.min.js"></script>
        <script src="js/kendo.binder.min.js"></script>
        <script>
            function onViewInit() {
              var url = "http://services.odata.org/OData/OData.svc/Categories";        
              var dataSource = new kendo.data.DataSource(
              {
                    type: "odata",
                transport: { read: url }
              });
               
              /*$("#categoriesListView").kendoMobileListView({
                dataSource: dataSource,
                style: "inset",
                template: "<strong>${Name}</strong>"
              });*/
                  
              var viewModel = kendo.observable({
                categories: dataSource
              });
              kendo.bind($("categoriesListView"), viewModel);
            }
        </script>
    </head>
    <body>
        <div data-role="view" id="categoriesView" data-init="onViewInit">
        <ul id="categoriesListView" data-role="listview" data-style="inset" data-template="list-template"
            data-bind="source: categories">
        </ul>
        <script id="list-template" type="text/x-kendo-template">
            <strong>#: data.Name #</strong></br>
        </script>
        </div>
        <script>     
            var app = new kendo.mobile.Application();
        </script>
    </body>
    </html>

    Cordially,
    Kakone.
  7. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 04 Apr 2012 Link to this post

    Hi,

    The recommended approach in this case is to use the view model configuration option. 
    Greetings,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Kakone
    Kakone avatar
    65 posts
    Member since:
    Jan 2010

    Posted 04 Apr 2012 Link to this post

    If I pass a string (a reference to the view model variable in the global scope), it works.

    But, if I don't want to create all the view models in the global scope, I would like to set the view model by code (in the view initialization event for example). In this case, it doesn't work, why ?

    function onViewInit(e) {
      var viewModel = kendo.observable({
        categories: dataSource
      });
      e.view.model = viewModel;   
    }

    Cordially,
    Kakone.
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 09 Apr 2012 Link to this post

    Hello Kakone ,

    I think the problem is caused by the wrong selector: 
    kendo.bind($("categoriesListView"), viewModel);

    In order to select the element through ID you need to use :
    kendo.bind($("#categoriesListView"), viewModel);

    I hope this helps.

    Greetings,
    Iliana Nikolova
    the Telerik team
    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