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

Question

我在做什么:

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

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

完成后，我想将其作为教程提供给那些想要进入 Backbone 和 KendoUI(这也非常酷)的人。

问题:

Kendo 网格不通过 Users View 渲染方法进行渲染 - 尽管它的容器模板是这样的。

现在，我必须在路由器渲染用户 View 之后从路由器的 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>

Backbone 用户查看

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 路由器

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> 中“用户网格模板”的。但是，我必须执行单独的“附加”方法才能将网格放入模板中。这似乎没有必要。

看来我应该能够放置所有这些......

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

关于如何构建它有什么建议吗？或者我当前的代码结构是否正确？

非常感谢您的建议!

<小时/>

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

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

由于 Backbone 是如此模块化，而我目前真正需要的只是它的路由器，因此我删除了所有 View (导航 View 除外)，只使用路由器并让 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(...) 中不会将 View 的 el 附加到 DOM，因此调用 $("# users-grid") 还没有找到任何内容。

您仍然可以在 View 的 el 上调用 kendoGrid，但您必须将“#user-grid”选择器的范围限制在 View 上才能执行此操作:

Backbone.View.extend({

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

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

});

在 View 上将 this.$ 作为函数调用是 View 上的快捷方法，以使用 el 作为 jquery 选择器的上下文。与调用 this.$el.find("#users-grid")

相同

FWIW:这些天我经常使用 Kendo，并且喜欢使用 Backbone。我还没有遇到过需要在 View 的渲染方法之外进行任何真正特殊处理的 Kendo 控件。