2011-07-13 6 views
1

私は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を警告しようとしましたが、同じ問題が発生します。

+0

'ich.order_list(active_orders)'と 'ich.sign_in_form({})'何を返すのですか?それらをコンソールに記録してみてください。問題はおそらくicanhazに関連しているようです。 – Tony

+0

ロギングの出力は次のとおりです。ich.templates.order_listが正しいように見えます。 ich.order_list(active_orders)は「[]」を記録します。 ich.templates.sign_in_formが正しいように見えます。 ich.sign_in_form()はh2要素を第1の項目として、フォーム要素を第2の項目として配列を記録します。 –

答えて

3

私は問題を把握しました。デフォルトでICanHaz.jsはjQueryまたはZeptoオブジェクトを返します。 (文字列が必要です)ich.template関数に2番目のパラメータを追加して、生の文字列出力をトリガすることができます。 Zeptoオブジェクトを返すことは問題ありません。ただし、Zeptoでは、$ .html()はZeptoオブジェクトを受け入れません。オプションは、ICanHaz.jsに生の文字列を出力させるか、またはZeptoオブジェクトを受け入れるZeptoメソッド(append、prepend、before、after)を使用することです。文字列に配列をレンダリングするために

は、単に使用: ich.myRenderFunction(myObject, true);

+0

あなたのために働いた解決策を教えてくれてありがとう!それは誰かにとって役に立ちます。あなた自身の答えを「受け入れる」べきであることに注意してください。そうすれば、その質問はリストに答えたように現れます。 – Tony

+1

2番目のパラメータの形式を指定するか、少なくともドキュメントへのリンクを提供すると便利です。 –

+0

これは私を助けましたが、2番目の議論が何を想定していたのか、本当に書いたはずです。 –

0

テンプレートが適切に解析されなかったときに起こるのは、実際のテンプレートのエラーです。テンプレートデータに問題がないこと、および正しくロードされていることを確認します。

+0

私はテンプレートで問題を見つけることができませんでした。私は上記の質問にそれらを加えました。テンプレートが正しく解析されたかどうかを確認する方法はありますか? –

+0

奇妙ですが、2番目のテンプレートの '{{'文字列の前と '}}の前にスペースを挿入するとどうなりますか?編集:ユーモア私はここで、私は私のicanhazプロジェクトでこれをしなければならなかった、そしてそれが実際に問題だったかどうかを見たいと思っていますか? – Femi

+0

スペースを追加しようとしました。それは影響がなかった。同じ問題が発生します。 –

関連する問題