Search code examples
htmltemplatesbackbone.jsmodel

Why are my Backbone.js model attributes embedded as HTML attributes?


I've googled and googled with no luck trying to figure out why I have this in my backbone.js app:

<div id="114" number="R462134068" line_items="[object Object]" status="ready" customer_name="John Doe" confirmation_code="PIMMS43" total="3.8" created_at="Fri May 10 2013 08:26:18 GMT+0100 (BST)" class="order-card-container">...

...which usually indicates I'm missing something obvious. Any ideas??

Here's the beginning of my view (CoffeeScript):

class BehindTheBarApp.Views.OrderCardView extends Backbone.View
  @LATE_ORDER_WATCHER_INTERVAL_MS: 1000

  className: 'order-card-container'
  template: JST["behind-the-bar-app/templates/order_card"]

  initialize: (order) =>
    @order = order

    # ...

And the line in another View loading the models...

_handleOrderAdded: (order, orders) =>
  orderCardView = new BehindTheBarApp.Views.OrderCardView(order)

  newItems = orderCardView.render().$el
  @$el.append( newItems )
      .isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' })

  @_orderCardViews.push orderCardView

Solution

  • Ok it turns out that you need to pass a hash into the initialize method, not just the model object. It should be...

    initialize: (options) =>
      @order = options.order
    

    ...and...

    _handleOrderAdded: (order, orders) =>
        orderCardView = new BehindTheBarApp.Views.OrderCardView({order: order})