Basic Data Bind Question

4 posts, 0 answers
  1. Andrew
    Andrew avatar
    11 posts
    Member since:
    Dec 2013

    Posted 16 Dec 2013 Link to this post

    Greetings,

    I have a JSON service (I don't control) that returns:
    {
       "ItemName":"Home"
    }
    To test standalone, I started from the base Icenium app and copied the above into data/item.json

    I created a data service that loads the JSON:

        MyViewModel = kendo.data.ObservableObject.extend({
            myDataSource: null,

            init: function () {
                var that = this,
                    dataSource;

                kendo.data.ObservableObject.fn.init.apply(that, []);

                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "data/item.json",
                            dataType: "json"
                        }
                    }
                });

                that.set("itemDataSource", dataSource);
            }
        });

        app.itemService = {
            viewModel: new MyViewModel()
        };

    What is the correct way to display ItemName?  If I try data.ItemName as below, I get undefined.  If I use ItemName alone I get a JavaScript error.  Pointers to existing docs would be great--I see ${var} used in Icenium whereas current Kendo seems to use #: var #.  Both worked the same.

        <div id="tabstrip-item"
            data-role="view"
            data-title="Item"
            data-model="app.itemService.viewModel">

            <div class="view-content" data-bind="source: itemDataSource" data-template="item-temp">
                 <script id="item-temp" type="text/x-kendo-template">Hello! #: data.ItemName #</script>
            </div>

        </div>

    Thanks!
  2. Andrew
    Andrew avatar
    11 posts
    Member since:
    Dec 2013

    Posted 16 Dec 2013 Link to this post

    Sorry--in trying to simplify above, I goofed:

    "myDataSource" should be "itemDataSource".  The set works as expected though.  It seems to be in displaying the JSON value.  All of the examples I found use a list view; this is a single JSON object.
  3. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 17 Dec 2013 Link to this post

    Hi Andrew,

    I am not sure for the exact reason why the template is not bound correctly, but I have found a few possible reasons:

    1. Do you get a single object in your response, or you get an array of objects? If you get just a single item, you will not be able to use it as template source item
    2. I am not sure why you are extending the ObservableObject, and not using just a plain DataSource in order to display the data in a widget
    3. Most importantly - a Kendo UI DataSource cannot be used in a source binding (data-bind="source: itemDataSource"). In order to use this type of binding you will need to have an observable array and not a dataSource.
    I hope this information will help you getting started. If you have any further questions, please do not hesitate to contact us.

    Regards,
    Kiril Nikolov
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  4. Andrew
    Andrew avatar
    11 posts
    Member since:
    Dec 2013

    Posted 17 Dec 2013 Link to this post

    Thanks for the suggestions, Kiril!
    1. Singe object - That was the problem.  Seems like a crazy limitation, but you have to have an array of objects.
    2. As far as ObservableObject, this was copied straight from the Telerik boilerplate for a new Kendo project in Mist, copying the weather.js code.  I agree after seeing other Kendo examples that it could probably be simpler.
    3. Yep, that seems to have done it.  By converting my JSON to a single-element array, it works now: 
    [ { "ItemName":"Home" } ]

              <div data-role="listview"
                    data-bind="source: itemDataSource "
                    data-template="simple" >
                 <script type="text/x-kendo-tmpl" id="simple"> #= ItemName #  </script>
              </div>
Back to Top