Javascript icanhaz.js模板的输出是[object Array],而不是呈现的模板

Javascript icanhaz.js模板的输出是[object Array],而不是呈现的模板,javascript,templates,backbone.js,zepto,icanhaz.js,Javascript,Templates,Backbone.js,Zepto,Icanhaz.js,我正在使用Zepto.js、ICanHaz.js和Backbone.js。我有几个模板,我正试图渲染。呈现模板并将结果插入页面后,我看到的唯一输出是[object Array]或[object HTMLTableElement] 这是backbone.js路由器 InspectionsRouter = Backbone.Router.extend({ routes: { "signin": "signin", "orders": "orders"

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

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

登录
  • 电子邮件地址
  • 密码
  • 登录
    这是第二个模板

    <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>
    
    
    名称
    电子邮件
    地位
    创建
    分配给
    {{{命令}
    {{last_name}},{{{first_name}}
    {{email}}
    {{status}}
    {{created_at}}
    {{assigned_to}}
    {{/orders}
    

    任何帮助都将不胜感激。问题似乎出在ICanHaz或主干上。我已尝试使用render方法从发出警报this.el,但仍然遇到相同的问题。

    当模板未正确解析时,我会遇到这种情况:通常是实际模板中的错误。验证模板数据是否存在问题,以及是否正确加载了模板数据。

    我解决了问题。默认情况下,ICanHaz.js返回jQuery或Zepto对象。(我需要一个字符串。)您可以向ich.template函数添加第二个参数来触发原始字符串输出。返回Zepto对象不会有问题,除非在Zepto中,$.html()不接受Zepto对象。选项是让ICanHaz.js输出原始字符串,或者使用接受Zepto对象的Zepto方法之一(append、prepend、before、after)

    要将数组呈现为字符串,只需使用:
    ich.myRenderFunction(myObject,true)

    我无法找到模板的问题。我已将它们添加到上述问题中。有什么方法可以检查模板是否已正确解析?奇怪,但是如果在第二个模板中的所有
    {{
    字符串之后和
    }
    之前插入空格,会发生什么情况?编辑:幽默我这里,但我必须在我的icanhaz项目上这样做,想知道这是否真的是一个问题吗?我尝试添加空间。这没有影响。同样的问题也会出现。ich.order列表(活动订单)
    和ich.sign\u表单({})返回什么?尝试将它们记录到控制台。问题似乎与icanhaz有关。以下是日志记录的输出:ich.templates.order\u list看起来正确。ich.订单列表(活动订单)日志“[]”。ich.templates.sign形式看起来正确。ich.sign_in_form()记录一个数组,其中h2元素作为第一项,form元素作为第二项。感谢您告诉我们这个解决方案对您有效!它可能对某人有用。请注意,您应该“接受”您自己的答案,这样问题将在列表中显示为已回答。指定第二个参数的形式会有所帮助,或者至少提供一个文档链接。这对我很有帮助,但你真的应该写下第二个论点应该是什么。这是从伟大的谷歌怪兽那里偶然发现的。答案在ICH网站上,上面写着:对于您定义的每个模板(除部分模板外),ICanHaz都会使用相同的名称构建一个检索功能。如果您不需要jQuery对象,而只需要填充的字符串,那么只需传入true作为第二个参数即可获得原始字符串。如果模板不生成html,那么在第二个参数工作时传入true,这将非常有用。