icanhaz.js templete的输出是[object Array]而不是渲染模板

我正在使用Zepto.js，ICanHaz.js和Backbone.js。我有几个我正在尝试呈现的模板。渲染模板并将结果插入页面后，我看到的唯一输出是[object Array]或[object HTMLTableElement]。icanhaz.js templete的输出是[object Array]而不是渲染模板

这里是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>

这是第二个模板。

<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有关。我试图用render方法警告this.el，但仍然遇到同样的问题。

来源

2011-07-13 Joshua Pangborn

什么'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元素作为第一项，而表单元素作为第二项记录一个数组。 –

我想出了这个问题。 ICanHaz.js默认返回一个jQuery或Zepto对象。（我期待一个字符串。）你可以添加第二个参数到ich.template函数来触发原始字符串输出。返回Zepto对象不会是一个问题，除了在Zepto中$ .html（）不接受一个Zepto对象。选项是让ICanHaz.js输出原始字符串，或者使用接受Zepto对象的Zepto方法之一（append，prepend，before，after）。

要渲染阵列为一个字符串，只需使用： ich.myRenderFunction(myObject, true);

来源

2011-07-14 01:28:45

感谢您告诉您为您工作的解决方案！这可能对某人有用。请注意，您应该“接受”自己的答案，以便问题在列表中显示为已回答。 – Tony

指定第二个参数的形式将是有帮助的，或者至少提供到文档的链接。 –

这帮助了我，但你真的应该写出第二个理由应该是什么。 –

模板未正确解析时发生在我身上：通常是实际模板中的错误。确认模板数据没有问题，并且正在正确加载。

来源

2011-07-13 02:46:22 Femi

我一直无法找到模板的问题。我已经将它们添加到上面的问题中。有没有什么方法可以检查模板是否已被正确解析？ –

奇数，但是如果在第二个模板中的所有'{{'字符串之后并在'}}'之前插入空格，会发生什么？编辑：幽默我在这里，但我必须在我的icanhaz项目上做到这一点，并希望看到，如果这实际上是一个问题？ – Femi

我尝试添加空格。它没有影响。发生同样的问题。 –

icanhaz.js templete的输出是[object Array]而不是渲染模板

回答

相关问题