Drawer problem

[Johannes Setiabudi]

I have been trying to follow along on the video here: http://www.telerik.com/videos/platform/building-mobile-apps-using-telerik-platform---part-i

But, my drawer won't open - in Chrome debugger, I keep getting this error: "Uncaught TypeError: Cannot read property 'openFor' of undefined" when I click on the drawer icon. Any help? My code is below:

todos.html
<div data-role="view" id="todos" data-model="APP.todos.model" data-init="APP.todos.events.init" data-after-show="APP.todos.events.afterShow">
  <header data-role="header">
    <div data-role="navbar">
      <a data-role="button" data-rel="drawer" href="#categories" data-icon="drawer-button" data-align="left"></a>
      <span data-role="view-title"></span>
      <!--<a data-role="button" data-rel="modalview" href="#newTodo" data-align="right" data-icon="compose"></a>-->
    </div>
  </header>
  <ul data-role="listview" data-style="inset" data-bind="source: todos" data-template="todos-template" data-pull-to-refresh="true"></ul>
</div><script type="text/x-kendo-template" id="todos-template">
  #: title #<a class="todo-close" data-bind="click: removeTodo"><i class="fa fa-check-square-o fa-lg"></i></a>
</script>

categories.html
<div data-role="drawer" id="categories" style="width: 270px" data-model="APP.categories.model" data-before-show="APP.categories.events.beforeShow" data-views="['todos']" class="">
  <div class="km-group-title">Categories</div>
  <ul data-role="listview" data-bind="source: categories" data-template="categories-template"></ul>
  <a data-role="button" data-icon="compose" class="full" data-rel="modalview" href="#newCategory">New</a>
</div><script type="text/x-kendo-template" id="categories-template">
  <a data-bind="click: onCategorySelect">#: name #</a>
</script>

​

[Anton Dobrev]

Hi Johannes,

Your code seems correct. That is why I assume that the problem might be somewhere else.  For you reference, please follow the completed project's repository from here.

Let me know if this helps and if you have further questions.

Regards,
Anton Dobrev
Telerik

 

 

[Johannes Setiabudi]

Anton, 

I found out what the problem was: the video tutorial did not mention this at all - that inside app.js - I need to include all new views within the require clause such as this:


require([
                'views/todos/todos',
                'views/categories/categories',
                'views/newTodo/newTodo',
                'views/newCategory/newCategory'
            ]


Another suggestion maybe to have separate tags for each tutorial step. So I can download the finish code for tutorial #1 before continuing to tutorial #2. Because right now what you have is just the finish code of tutorial 1+2+3. 

[Stefan Dobrev]

Hello Johannes,

Thanks for your constructive feedback. We will consider improving the tutorials by tagging the different steps in GitHub.

Regards,
Stefan Dobrev
Telerik