私がしていること：
Rails 3をJSONサーバーとして使用して、KendoUIコントロールをBackbone.jsに組み込む方法を示すサンプルアプリを作成しています。
これまでのところ、クリックされたリンクに応じて、erbファイル内のテンプレートを管理しているバックボーンビューと、ビュー自体を管理しているバックボーンルーターがあります。
これが終わったら、BackboneとKendoUI（これもかなりクールです）を使いたい人を助けるためのチュートリアルとしてすべてを利用できるようにしたいと思います。
問題：
剣道グリッドは、コンテナテンプレートであるにもかかわらず、UsersViewレンダリングメソッドを介してレンダリングされていません。
現在、ルーターがユーザービューをレンダリングした後、ルーターのユーザーメソッドからグリッドをレンダリングする必要があります。
テンプレートがレンダリングされるのは奇妙に思えますが、グリッドはレンダリングされません-または何かが欠けていますか？
コードを見ると、理解しやすくなるかもしれません。
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」に配置されます。ただし、グリッドをテンプレートに取り込むには、別の「追加」メソッドを実行する必要があります。これは不要のようです。
このすべてを配置できるはずです...
...UsersViewRenderメソッドの内部-appendメソッドを使用する必要はありません。しかし、私はそれを機能させることができません。
これを構成する方法について何か提案はありますか？または、現在のコードが正しく構造化されているかどうか。
アドバイスは大歓迎です！
編集-簡略化されたソリューション（Derickに感謝）
私はこれを複雑にしすぎていることに気づきました。私は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を適用します。