English 中文(简体)
Output of icanhaz.js templete is [object Array] instead of the rendered template
原标题:

I am using Zepto.js, ICanHaz.js, and Backbone.js. I have a couple of templates that I am trying to render. After rendering the template and inserting the result into the page, the only output that I seeing is [object Array] or [object HTMLTableElement].

Here is the backbone.js Router

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");
            }
         });
    }
}); 

The first template is static and has no data inserted. Here is code

SignInForm = Backbone.View.extend({
    render: function() {
        this.el = ich.sign_in_form({});
        return this.el;
    }
});

The other template is somewhat more complicated.

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;
    }
});

The actual templates aren t very complicated. The first is a simple sign in form. The next is a table.

Here is the first template.

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

Here is the second template.

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

Any help would be appreciated. The problem seems to be with ICanHaz or in Backbone. I have tried alerting this.el from with the render method and still get the same issue.

最佳回答

I figured out the issue. ICanHaz.js by default returns a jQuery or Zepto object. (I was expecting a string.) You can add a second parameter to the ich.template function to trigger the raw string output. Returning the Zepto object wouldn t be a problem except that, in Zepto, $.html() doesn t accept a Zepto object. The options are to have ICanHaz.js output the raw string, or to use one of the Zepto methods that accept a Zepto object (append, prepend, before, after).

To render the array to a string, just use: ich.myRenderFunction(myObject, true);

问题回答

That happens to me when the template wasn t properly parsed: typically an error in the actual template. Verify there are no issues with the template data and that it is being properly loaded.





相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签