Question

我在做什么：

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

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

当这个完成后，我想把它全部作为一个教程来帮助想要进入Backbone的人 - 和KendoUI（这也非常酷）。

问题：

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

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

enter image description here

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

一旦看到代码，也许会更容易理解：

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>中。但是，我必须单独使用'append'方法才能将网格放入模板中。这似乎没必要。

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

enter image description here

...在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控件。

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

1 个答案: