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

Output of icanhaz.js templete is [object Array] instead of the rendered template

本文关键字:输出 js object Array      更新时间:2023-09-26

我正在使用Zepto.js, icanhazs .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>

任何帮助都会很感激。问题似乎与ICanHaz或在主干。我试过提醒这个。

我找到了问题所在。js默认返回一个jQuery或Zepto对象。(我还以为是字符串呢。)您可以向ich添加第二个参数。模板函数触发原始字符串输出。返回Zepto对象不是问题,只是在Zepto中,$.html()不接受Zepto对象。选项是让ICanHaz.js输出原始字符串,或者使用接受Zepto对象的Zepto方法之一(append, prepend, before, after)。

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

当模板没有正确解析时,这种情况就会发生在我身上:通常是实际模板中的错误。验证模板数据没有问题,并且它正在正确加载。