Backbone.js + KendoUI - 使用网格进行路由,视图和结构化

Question

我在做什么:

我正在创建一个示例应用程序,演示如何使用Rails 3作为JSON服务器将Kendo UI控件与Backbone.js合并.

到目前为止,我有一个在erb文件中管理模板的Backbone Views和一个管理Views本身的Backbone Router - 取决于被点击的链接.

完成后,我想把它全部作为一个教程来帮助想要进入Backbone的人 - 和KendoUI(这也非常酷).

问题:

Kendo网格不通过用户视图渲染方法渲染 - 即使它是容器模板.

现在,我必须从路由器的Users方法渲染网格 - 在路由器渲染用户视图之后.

模板渲染似乎很奇怪,但网格没有 - 或者我错过了什么？

一旦看到代码,可能会更容易理解:

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>

骨干用户查看

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;
            }

        });

骨干路由器

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 UI网格是动态生成的,并放置<div id="users-grid"></div>在"users-grid-template"中.但是,我必须单独使用'append'方法才能将网格放入模板中.这似乎没必要.

似乎我应该能够放置所有这些......

...在UsersView Render方法内部 - 无需使用append方法.但我无法让它发挥作用.

关于如何构建这个的任何建议？或者我当前的代码是否结构正确？

建议非常感谢!

---

编辑 - 简化解决方案(感谢Derick)

我意识到我过于复杂了.我试图使用Backbone来做Kendo已经在做的事情 - 管理它的网格和数据源.

由于Backbone是如此模块化,而我现在真正需要的只是它的路由器,我删除了所有视图 - 除了导航视图 - 并且只是使用路由器并让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应用于此.

Answer 1

问题是由于在尝试呼叫时缺少选择器的范围.kendoGrid.将您的内容填入所有内容el.html(...)并不会将您的视图附加el到DOM,因此调用$("#users-grid")无法找到任何内容.

您仍然可以调用kendoGrid视图的el,但是您必须将"#user-grid"选择器的范围限定为视图才能执行此操作:

Backbone.View.extend({

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

    this.$("#user-grid").kendoGrid({
      // kendo grid options here 
    });
  }

});

this.$作为视图上的函数调用是视图上的快捷方法,el用作jquery选择器的上下文.这和打电话一样this.$el.find("#users-grid")

FWIW:这些天我使用Kendo很多,并且喜欢Backbone.我还没有进入一个需要在视图渲染方法之外进行任何真正特殊处理的Kendo控件.