How to replace an empty selector inside the underscorejs template

Question

I have 2 backbone nested views that render a table of products for a shopping cart. Every view has its own underscore template. When the cart is empty only the main view will render replacing the empty div with: "cart is empty". Unfortunately the following solution didn't work:

<div class="container">    
    <div class="twelve columns">
        <table class="standard-table">
            <thead>
                 <tr>
                    <th>Remove</th>
                    <th>Product code</th>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>Total</th>
                </tr>                  
            </thead>
          <tbody class="cart-table-body">       

          <% if (typeof(product_id)=="undefined") { %>
               <tr>
                  <td>cart is empty</td>                
               </tr>   
          <% } %>

         </tbody>

        </table>
   </div>
</div>

The nested template

    <td><i class="icon-remove-sign"></i></td>
    <td><%= product_id %></td>
    <td><%= product_name %></td>
    <td><%= price %></td>
    <td><%= quantity %></td>
    <td><%= price*quantity %></td>

Could you also add js code of addProduct and render (or similar) methods of your cart view. — zaquest
@zaquest: I found this solution in the Backbone main view: if (!this.collection.length){ this.$(".cart-table-body").html('<th colspan="6">the cart is empty</th>') } — Cris69

zaquest zaquest · Accepted Answer · 2013-09-15T18:40:22

I think, you never pass product_id into the first template, meaning it always shows cart is empty. You should pass there some flag variable like products_length or empty_cart so the template could check if cart is empty.

Also with this approach you need a way to check whether you add first product and in that case replace existing innards of cart-table-body (cart is empty message) with a first added product view element. Then append views of following elements.

How to replace an empty selector inside the underscorejs template

1 Answers