Basic Data Bind Question

[Andrew]

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!

[Andrew]

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.

[Kiril Nikolov]

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.

[Andrew]

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>