sinatradashingbatman.js

Multiple lists in a Dashing widget


I've cloned the Dashing List widget and edited it so it'll contain three separate lists, like in this image. The job associated with the widget makes a GET request to a REST API search endpoint, and then creates a hash of the first five results. The coffeescript is unmodified, aside from the class name.

The widget shows the correct number of items for each list, but the actual data (name of the object and number of views) isn't displayed. I'm running the dashboard in debug mode, and it is receiving the correct data, but that data isn't populating in the widget itself.

I'm completely new to Dashing (and many of the frameworks it uses), and this is the first stumbling block I've run into. What's going wrong?

Job:

SCHEDULER.every '1h' do
  ldata = get_data(lots)
  hdata = get_data(houses)
  sdata = get_data(stores)
  send_event('most-pop-items', {litems: ldata[:mostPop], hitems: hdata[:mostPop], \
                            sitems: sdata[:mostPop], titems: ldata[:mostPop]})
end

def get_data(org)
  @data = { }      
  response = org.search({:orgid => @data[:id], :sortField => 'numViews', :sortOrder => 'desc'})
  @data[:numItems] = response['total']

  @data[:mostPop] = {}

  for counter in 0..4
    @data[:mostPop][counter] = {:label => response['results'][counter]['title'], \
                                :value => response['results'][counter]['numViews']}
  end

  return @data
end

Widget html:

<h1 class="title" data-bind="title"></h1>

<h3 class="htitle" data-bind="htitle"></h3>
<ol>
  <li data-foreach-item="hitems">
    <span class="label" data-bind="hitem.label"></span>
    <span class="value" data-bind="hitem.value"></span>
  </li>
</ol>

<ul class="list-nostyle">
  <li data-foreach-item="hitems">
    <span class="label" data-bind="hitem.label"></span>
    <span class="value" data-bind="hitem.value"></span>
  </li>
</ul>

<br>

<h3 class="stitle" data-bind="stitle"></h3>
<ol>
  <li data-foreach-item="sitems">
    <span class="label" data-bind="sitem.label"></span>
    <span class="value" data-bind="sitem.value"></span>
  </li>
</ol>

<ul class="list-nostyle">
  <li data-foreach-item="sitems">
    <span class="label" data-bind="sitem.label"></span>
    <span class="value" data-bind="sitem.value"></span>
  </li>
</ul>

<br>

<h3 class="ltitle" data-bind="ltitle"></h3>
<ol>
  <li data-foreach-item="litems">
    <span class="label" data-bind="litem.label"></span>
    <span class="value" data-bind="litem.value"></span>
  </li>
</ol>

<ul class="list-nostyle">
  <li data-foreach-item="litems">
    <span class="label" data-bind="litem.label"></span>
    <span class="value" data-bind="litem.value"></span>
  </li>
</ul>

<br>

<h3 class="ttitle" data-bind="ttitle"></h3>
<ol>
  <li data-foreach-item="titems">
    <span class="label" data-bind="titem.label"></span>
    <span class="value" data-bind="titem.value"></span>
  </li>
</ol>

<ul class="list-nostyle">
  <li data-foreach-item="titems">
    <span class="label" data-bind="titem.label"></span>
    <span class="value" data-bind="titem.value"></span>
  </li>
</ul>

<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

Solution

  • Try changing the data-bind you have back to its original, just item.label and item.value These do not have to be renamed as you have done to match the data-for-each item