Что я делаю:
Я создаю пример приложения, в котором показано, как встроить элементы управления Kendo UI в Backbone.js, используя Rails 3 в качестве сервера JSON.
Пока у меня есть Backbone Views, которые управляют шаблонами в файле erb, и Backbone Router, который управляет самими Views - в зависимости от ссылок, по которым щелкают.
Когда это будет сделано, яхочу сделать все это доступным в виде учебника, чтобы помочь людям, которые хотят войти в Backbone - и KendoUI (что тоже чертовски круто).
Проблема:
Сетка Kendo не рендерится с помощью метода рендеринга Users 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>
Магистральное представление пользователей
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 динамически генерируется и помещается в <div id="users-grid"></div> «users-grid-template».Но я должен сделать отдельный метод 'добавления', чтобы получить сетку в шаблон.Это кажется ненужным.
Кажется, что я должен быть в состоянии поместить все это ...
... внутри метода визуализации UsersView -без использования метода добавления.Но я не могу заставить это работать.
Есть предложения о том, как это структурировать?Или правильно структурирован мой текущий код?
Советы очень ценятся!
РЕДАКТИРОВАТЬ - Упрощенное решение (спасибо Дерику)
Я понял, что слишком усложняю это.Я пытался использовать Backbone, чтобы делать то, что уже делал Кендо - управлять сеткой и источником данных.
Поскольку 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 к этому.