Backbone.js + KendoUI - Routing, vista, e la strutturazione con griglia

Question

Quello che sto facendo:

Sto creando un'applicazione di esempio che mostra come incorporare Kendo controlli UI con Backbone.js usando Rails 3 come server JSON.

Finora, ho Viste di Backbone che gestiscono i modelli in un file erb e un Backbone Router che gestisce le Visualizzazioni stesse - a seconda dei collegamenti su cui si fa clic.

Quando questo è finito, voglio rendere tutto disponibile come tutorial per aiutare le persone che vogliono entrare in Backbone - e KendoUI (che è anche dannatamente bello).

Il problema:

La griglia Kendo non viene eseguito il rendering attraverso le utenti visualizzano metodo render - anche se è modello di contenitore è.

In questo momento, devo eseguire il rendering della griglia dal metodo Utenti del router, dopo che il router ha reso la vista Utente.

Sembra strano che il modello rende, ma la griglia non lo fa - o mi sto perdendo qualcosa?

Forse sarà più semplice da capire una volta si vede il codice:

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 Utenti Visualizza

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 Router

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

Come si può vedere, la griglia di Kendo UI è generato dinamicamente e collocate nella <div id="users-grid"></div> del "utenti-grid-modello". Ma, devo fare un metodo "append" separato per ottenere la griglia nel modello. Questo sembra non necessario.

sembra che dovrei essere in grado di mettere tutto questo ...

... all'interno della UsersView metodo Render - senza la necessità di utilizzare il metodo di accodamento. Ma non riesco a farlo funzionare.

Qualche suggerimento su come strutturare questo? O se il mio codice attuale è strutturato correttamente?

Consigli molto apprezzati!

---

EDIT - semplificato Soluzione (grazie a Derick)

mi sono reso conto che ero troppo complicare questo. Stavo cercando di usare Backbone per fare ciò che Kendo stava già facendo - gestendo la sua griglia e l'origine dati.

Dal Backbone è così modulare, e tutto quello che ho veramente bisogno per il momento era del router, ho tolto tutti i punti di vista - tranne per la vista di navigazione - e appena usato il router e lasciare Kendo fare il suo dovere.

Penso che la soluzione è molto più semplice e più facile da gestire il codice. (almeno per me)

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

Speriamo che qualcuno lo trovi utile.

passo successivo - si applicano CRUD a questo.

Answer 1

il problema è causato dalla mancanza di scoping selettore quando si cerca di chiamare .kendoGrid. Ripieno il contenuto dentro al el.html(...) non attaccare di el al DOM la visualizzazione, in modo da una chiamata a $("#users-grid") non ha nulla da trovare, ancora.

È comunque possibile chiamare kendoGrid su El della vista, ma si deve ambito tua selettore "# user-grid" al fine di farlo:

Backbone.View.extend({ 

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

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

}); 

chiamando this.$ in funzione su una vista è un metodo di scelta rapida sulla vista, per utilizzare el come contesto per il selettore jquery. È lo stesso di chiamare this.$el.find("#users-grid")

FWIW: Sto usando molto Kendo in questi giorni e lo adoro con Backbone. Non ho ancora eseguito un controllo Kendo che richiede una vera gestione speciale al di fuori del metodo di rendering di una vista.