我在做什么：
我正在创建一个示例应用程序，展示如何使用 Rails 3 作为 JSON 服务器将 Kendo UI 控件与 Backbone.js 合并。
到目前为止，我有管理 erb 文件中的模板的主干视图和管理视图本身的主干路由器 - 取决于单击的链接。
完成后，我想将其作为教程提供，以帮助想要进入 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;
}
});
骨干路由器
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>在“users-grid-template”中。但是，我必须执行一个单独的“附加”方法才能将网格放入模板中。这似乎是不必要的。
看来我应该能够放置所有这些......
...在 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 应用于此。