Backbone.js + KendoUI - Маршрутизация, представления и структурирование с помощью сетки

Что я делаю:

Я создаю образец приложение, в котором показано, как включить элементы управления Kendo UI в Backbone.js, используя Rails 3 в качестве сервера JSON.

На данный момент у меня есть Backbone Views, которые управляют шаблонами в файле erb, и Backbone Router, который управляет самими Views - в зависимости от щелчков по ссылкам.

Когда это будет закончено, я хочу сделать все это доступным в качестве учебного пособия, чтобы помочь людям, которые хотят изучить Backbone - и KendoUI (что тоже чертовски круто).

Проблема:

Сетка Kendo не визуализируется с помощью метода визуализации пользовательского представления, хотя это шаблон контейнера.

Прямо сейчас мне нужно визуализировать сетку из метода Users маршрутизатора - после того, как маршрутизатор отрендерил представление User.

Кажется странным, что шаблон отображается, а сетка - нет - или я что-то упустил?

Может быть, будет проще понять, как только вы увидите код:

index.html.erb

<h1>Kendo Grid Test</h1>

<div id="nav"></div>


<div id="container">

<!-- The templates below will be placed  here dynamically    -->

</div>

<!-- TEMPLATES -->
<script type="text/template" id="users-grid-template">  
    <p>Users Grid Template</p>

    <div id="users-grid"></div> 


</script>

<script type="text/template" id="posts-grid-template">  
    <div id="posts-grid"></div> 
</script>



<script type="text/template" id="nav-template">
  <div>
    <ul id="nav_container">
        <li><a href="#users">Users</a></li>
        <li><a href="#posts">Posts</a></li>
    </ul>
  </div>
</script>

Backbone Users View

window.UsersView = Backbone.View.extend({

            initialize: function() {                                
                _.bindAll(this, "render");
                this.usersGrid = _.template($("#users-grid-template").html());
                this.render().el;                   
            },

            render: function() {                
                $(this.el).html(this.usersGrid).fadeIn();
                return this;
            }

        });

Backbone Router

window.AppRouter = Backbone.Router.extend({

        routes: {
            'users': 'users',
            'posts': 'posts'

        },

        initialize: function() {            
            this.usersView = new UsersView;
        },      

        posts: function() {
            var container = $("#container");
            container.empty();
        },      


        users: function() { 

            var container = $("#container");
            container.empty();          

            container.append(this.usersView.render().el);

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

                var grid = $("#users-grid").kendoGrid({

                    dataSource: UsersData,

                    columns: [
                    {
                        field: "first_name",
                        title: "First Name"
                    },
                    {
                        field: "last_name",
                        title: "Last Name",

                    }]
                });

                container.append(grid);             
        }           
    });



    window.App = new AppRouter();
    Backbone.history.start();

Как видите, сетка пользовательского интерфейса Kendo динамически генерируется и помещается в

раздела " шаблон-сетка-пользователей ". Но мне нужно сделать отдельный метод добавления, чтобы добавить сетку в шаблон. Это кажется ненужным.

Похоже, я смогу разместить все это ...

... внутри метода рендеринга UsersView - без использования метода добавления. Но я не могу заставить это работать.

Есть предложения, как это структурировать? Или правильно ли структурирован мой текущий код?

Совет очень признателен!

---

РЕДАКТИРОВАТЬ - упрощенное решение (спасибо Дерику)

Я понял, что слишком усложняю это. Я пытался использовать Backbone для того, что уже делал Kendo - для управления своей сеткой и источником данных.

Поскольку Backbone очень модульный, и все, что мне действительно нужно на данный момент, это Router, я удалил все представления - кроме представления Navigation - и просто использовал Router и позволил Kendo делать свое дело.

Я думаю, что решение намного проще и легче управлять кодом. (по крайней мере, для меня)

$(document).ready(function(){


        window.Navigation = Backbone.View.extend({
        el: $("#nav"),          

        initialize: function() {            
            _.bindAll(this, "render");
            this.nav = $("#nav-template").html();
            this.render().el;
        },  

        render: function() {
            $(this.el).html(this.nav);
            return this;
        }



        });

    window.nav = new Navigation;  

    window.AppRouter = Backbone.Router.extend({

        routes: {
            'users': 'users',
            'posts': 'posts'

        },

        initialize: function() {            
            var container = $("#container");
            //container.html("#users-grid");
        },      

        posts: function() {
            var container = $("#container");
            container.empty();
        },      


        users: function() { 

            var container = $("#container");
            usersTemplate = _.template($("#users-grid-template").html());
            container.empty(); 
            container.html(usersTemplate);

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

                $("#users-grid").kendoGrid({

                    dataSource: UsersData,

                    columns: [
                    {
                        field: "first_name",
                        title: "First Name"
                    },
                    {
                        field: "last_name",
                        title: "Last Name",

                    }]
                });                              
        }           
    });

    window.App = new AppRouter();
    Backbone.history.start();




// Closing jquery tag    
});

Надеюсь, кому-нибудь это пригодится.

Следующий шаг - применить к этому CRUD.