私はZepto.js、ICanHaz.js、およびBackbone.jsを使用しています。レンダリングしようとしているテンプレートがいくつかあります。テンプレートをレンダリングして結果をページに挿入した後、私が見るのは[object Array]または[object HTMLTableElement]だけです。ここicanhaz.js templeteの出力はレンダリングされたテンプレートではなく[オブジェクト配列]
は、最初のテンプレートは静的であり、挿入されたデータがないBACKBONE.JSルータ
InspectionsRouter = Backbone.Router.extend({
routes: {
"signin": "signin",
"orders": "orders"
},
signin: function() {
var signinForm = new SignInForm();
$('div#content').html(signinForm.render());
},
orders: function() {
InspectionsApp.active_orders = new Orders();
InspectionsApp.active_orders.fetch({
success: function() {
var order_list = new OrderList({
collection: InspectionsApp.active_orders
});
$('div#content').html(order_list.render());
},
error: function() {
Dialog.error("Unable to Load Active Orders");
}
});
}
});
あります。ここにコードがあります
SignInForm = Backbone.View.extend({
render: function() {
this.el = ich.sign_in_form({});
return this.el;
}
});
他のテンプレートはやや複雑です。
var OrderList = Backbone.View.extend({
tagName: 'table',
id: 'order_list',
initialize: function() {
_.bindAll(this, 'render');
},
render: function() {
var active_orders = {};
active_orders.orders = this.collection;
$(this.el).html(ich.order_list(active_orders));
return this.el;
}
});
実際のテンプレートはあまり複雑ではありません。最初のフォームは簡単なサインインです。次はテーブルです。
ここは最初のテンプレートです。
<script id="sign_in_form" type="text/html">
<h2 class="page_title">Sign In</h2>
<form action="action/login.php" method="post" id="frm_login" name="frm_login">
<fieldset id="credentials">
<ol>
<li class="login">
<label for="email">E-mail Address</label>
<input type="email" name="email" id="email" tabindex="1" required>
</li>
<li class="login">
<label for="password">Password</label>
<input type="password" name="password" id="password" tabindex="2" required>
</li>
</ol>
</fieldset>
<button class="button" id="btn_sign_in" type="submit" tabindex="3"><img src="icons/door_in.png">Sign In</button>
</form>
</script>
ここは2番目のテンプレートです。
<script id="order_list" type="text/html">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Status</th>
<th>Created</th>
<th>Assigned To</th>
</tr>
</thead>
<tbody id="order_list_body">
{{#orders}}
<tr>
<td>{{last_name}}, {{first_name}}</td>
<td>{{email}}</td>
<td>{{status}}</td>
<td>{{created_at}}</td>
<td>{{assigned_to}}</td>
</tr>
{{/orders}}
</tbody>
</script>
助けてください。この問題は、ICanHazまたはBackboneにあるようです。私はレンダリングメソッドからthis.elを警告しようとしましたが、同じ問題が発生します。
'ich.order_list(active_orders)'と 'ich.sign_in_form({})'何を返すのですか?それらをコンソールに記録してみてください。問題はおそらくicanhazに関連しているようです。 – Tony
ロギングの出力は次のとおりです。ich.templates.order_listが正しいように見えます。 ich.order_list(active_orders)は「[]」を記録します。 ich.templates.sign_in_formが正しいように見えます。 ich.sign_in_form()はh2要素を第1の項目として、フォーム要素を第2の項目として配列を記録します。 –