title: Fuelux - How to populate repeater data using datasource
body: <p>I am trying to use <a href="http://getfuelux.com/javascript.html#repeater" rel="nofollow">fuelux repeater</a> for one of my projects but I kind of struggle on populating data into the table. I used the basic repeater template given on the docs but couldnt understand <a href="https://github.com/ExactTarget/fuelux/blob/gh-pages/assets/js/repeater-examples.js" rel="nofollow">their example</a> properly since its using a lot of other plugins like require.js and underscore.js. Can anyone please help me understand how to do this. Essentially I want use php and js to import data into the repeater.</p>
  
  <p>I have a jsfiddle setup <a href="http://jsfiddle.net/wrcfh4b8/" rel="nofollow">here</a> with my current progress.</p>
  
  <pre><code>&lt;div class="fuelux"&gt;
      &lt;div class="repeater" id="myRepeater"&gt;
      &lt;div class="repeater-header"&gt;
        &lt;div class="repeater-header-left"&gt;
          &lt;span class="repeater-title"&gt;Awesome Repeater&lt;/span&gt;
          &lt;div class="repeater-search"&gt;
            &lt;div class="search input-group"&gt;
              &lt;input type="search" class="form-control" placeholder="Search"/&gt;
              &lt;span class="input-group-btn"&gt;
                &lt;button class="btn btn-default" type="button"&gt;
                  &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Search&lt;/span&gt;
                &lt;/button&gt;
              &lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="repeater-header-right"&gt;
          &lt;div class="btn-group selectlist repeater-filters" data-resize="auto"&gt;
            &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
              &lt;span class="selected-label"&gt;&amp;nbsp;&lt;/span&gt;
              &lt;span class="caret"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Toggle Filters&lt;/span&gt;
            &lt;/button&gt;
            &lt;ul class="dropdown-menu" role="menu"&gt;
              &lt;li data-value="all" data-selected="true"&gt;&lt;a href="#"&gt;all&lt;/a&gt;&lt;/li&gt;
              &lt;li data-value="some"&gt;&lt;a href="#"&gt;some&lt;/a&gt;&lt;/li&gt;
              &lt;li data-value="others"&gt;&lt;a href="#"&gt;others&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/&gt;
          &lt;/div&gt;
          &lt;div class="btn-group repeater-views" data-toggle="buttons"&gt;
            &lt;label class="btn btn-default active"&gt;
              &lt;input name="repeaterViews" type="radio" value="list"&gt;&lt;span class="glyphicon glyphicon-list"&gt;&lt;/span&gt;
            &lt;/label&gt;
            &lt;label class="btn btn-default"&gt;
              &lt;input name="repeaterViews" type="radio" value="thumbnail"&gt;&lt;span class="glyphicon glyphicon-th"&gt;&lt;/span&gt;
            &lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="repeater-viewport"&gt;
        &lt;div class="repeater-canvas"&gt;&lt;/div&gt;
        &lt;div class="loader repeater-loader"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="repeater-footer"&gt;
        &lt;div class="repeater-footer-left"&gt;
          &lt;div class="repeater-itemization"&gt;
            &lt;span&gt;&lt;span class="repeater-start"&gt;&lt;/span&gt; - &lt;span class="repeater-end"&gt;&lt;/span&gt; of &lt;span class="repeater-count"&gt;&lt;/span&gt; items&lt;/span&gt;
            &lt;div class="btn-group selectlist" data-resize="auto"&gt;
              &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
                &lt;span class="selected-label"&gt;&amp;nbsp;&lt;/span&gt;
                &lt;span class="caret"&gt;&lt;/span&gt;
                &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
              &lt;/button&gt;
              &lt;ul class="dropdown-menu" role="menu"&gt;
                &lt;li data-value="5"&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
                &lt;li data-value="10" data-selected="true"&gt;&lt;a href="#"&gt;10&lt;/a&gt;&lt;/li&gt;
                &lt;li data-value="20"&gt;&lt;a href="#"&gt;20&lt;/a&gt;&lt;/li&gt;
                &lt;li data-value="50" data-foo="bar" data-fizz="buzz"&gt;&lt;a href="#"&gt;50&lt;/a&gt;&lt;/li&gt;
                &lt;li data-value="100"&gt;&lt;a href="#"&gt;100&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/&gt;
            &lt;/div&gt;
            &lt;span&gt;Per Page&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="repeater-footer-right"&gt;
          &lt;div class="repeater-pagination"&gt;
            &lt;button type="button" class="btn btn-default btn-sm repeater-prev"&gt;
              &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Previous Page&lt;/span&gt;
            &lt;/button&gt;
            &lt;label class="page-label" id="myPageLabel"&gt;Page&lt;/label&gt;
            &lt;div class="repeater-primaryPaging active"&gt;
              &lt;div class="input-group input-append dropdown combobox"&gt;
                &lt;input type="text" class="form-control" aria-labelledby="myPageLabel"&gt;
                &lt;div class="input-group-btn"&gt;
                  &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
                    &lt;span class="caret"&gt;&lt;/span&gt;
                    &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul class="dropdown-menu dropdown-menu-right"&gt;&lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="myPageLabel"&gt;
            &lt;span&gt;of &lt;span class="repeater-pages"&gt;&lt;/span&gt;&lt;/span&gt;
            &lt;button type="button" class="btn btn-default btn-sm repeater-next"&gt;
              &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Next Page&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>