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

Question

我在做什么：

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

到目前为止，我有一个管理 erb 文件中的模板的主干视图和一个管理视图本身的主干路由器 - 取决于单击的链接。

完成后，我希望将其作为教程提供给想要进入 Backbone 和 KendoUI（也非常酷）的人们。

问题：

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

现在，我必须在路由器渲染用户视图之后从路由器的用户方法渲染网格。

模板渲染看起来很奇怪，但网格没有 - 还是我遗漏了什么？

也许你看到代码会更容易理解：

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 网格是动态生成的，并放置在“users-grid-template”的<div id="users-grid"></div> 中。但是，我必须执行一个单独的“附加”方法才能将网格放入模板中。这似乎没有必要。

看来我应该可以放置所有这些了...

... 在 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") 的调用还没有任何内容可找到。

您仍然可以在视图的 el 上调用 kendoGrid，但您必须将“#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：这些天我经常使用剑道，并且喜欢 Backbone。我还没有遇到需要在视图的渲染方法之外进行任何真正特殊处理的 Kendo 控件。