Observable in modal window

Question

I'm working on SPA. I'm using RequireJS and kendo routing.

define(['kendo'],function(kendo) {

router.route("/SomePage/", function () {
            require(['MyViewModel', 'text!MyTemplate'], function (viewModel, view) {
                loadView("#main-content", viewModel, view);
            });
        });
var loadView = function(container, viewModel, view) {
            var kendoView = new kendo.View(view, { model: viewModel });
                layout.showIn(container, kendoView);
        };
}

(code above work very well)

There is kendo grid filled by response from server through observable object. Each row in grid has button, which open modal window. In window will be dynamically generated radiobutton group.

So, I have MyViewModel.js

define(['GridDataSource','RadioBtnDataSource'],function(ds, ds2){

    var GridViewModel = kendo.observable({
        gridDS: ds,

        openModalWin: function (e) {

           var modalWindow = $("#actions-modal-window").kendoWindow({}).data("kendoWindow").open();
           modalWindow.center();

           //radiobuttons view model
           var actionsViewModel = kendo.observable({

              //actions: ds2
              actions: [
                  { id: "id1", lable: "Send to black hole" },
                  { id: "id2", lable: "Shred" }
              ]
           });

           kendo.bind($("#radioBtnGroup"), actionsViewModel);
        }
    });

return cileGridViewModel;
});

And here is my html template:

 <div class="panel-body"><

                <div id="cile-table"
                     data-role="grid"
                     data-editable="window"
                     data-bind="source: gridDS"
                     data-columns='[
                     {"field": "ID"},
                     {"field": "Name"},
                     {"template":"<a href=\"\\#/SomePage/\" data-bind=\"click: openModalWin \">Open</a>"},
                 ]'></div>

                <div id="actions-modal-window"
                     data-role="window"
                     data-visible="false"
                     data-modal="true"
                     data-width="55%"
                     data-height="600">

                        <ul data-bind="source: actions" data-template="ul-template" id="radioBtnGroup"></ul>

                        <script id="ul-template" type="text/x-kendo-template">
                            <li>
                                <input type="radio" name="hcEnd" id="hc1" data-bind="attr: {id: id}" />
                                <label data-bind="attr: {for: id}, text:lable"></label><br />
                            </li>
                        </script>
                </div>
        </div>
</div>

There is li kendo template with data-binding.

When I use jsfiddle it works: http://jsfiddle.net/kuba_vaclavik/kEqYh/212/

But in my project it returns error "Uncaught TypeError: undefined has no properties". Probably, there is problem with binding viewModel with unordered list or nested observable object, but I'm not able to fix it. Please, can someone help? It's possible that my approach is wrong, so I welcome different approach.

Answer 1

Solved. Unordered list missed data-role="listview". Probably in SPA it is necessary

<ul   data-role="listview"   data-bind="source: cilActions " data-template="ul-template" id="radioBtnGroup"></ul>