Backbone.js + KendoUI - маршрутизация, Просмотров и структурирование с сеткой

Question

Что я делаю:

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

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

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

Проблема:

Сетка Кендо не рендеринг через пользователь Посмотреть метод отрисовки - даже если это шаблон контейнера.

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

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

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

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

     }); 

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(); 

Как вы можете видеть, сетка Кендо UI динамически генерируется и помещается в <div id="users-grid"></div> от «пользователей сетки-шаблона». Но я должен сделать отдельный метод «добавить», чтобы получить сетку в шаблоне. Это кажется ненужным.

Похоже, что я должен быть в состоянии разместить все это ...

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

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

Рекомендация очень ценится!

---

EDIT - упрощенное решение (благодаря Дерик)

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

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

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

$(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 на Е.Л. зрения, но вы должны рамки ваш «# пользователя сетка» селектор точки зрения, чтобы сделать это:

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 и люблю его с помощью базовой линии. Я еще не пришел в систему управления Kendo, которая нуждается в какой-либо реальной специальной обработке вне метода визуализации вида.