Fuelux - 如何使用數據源填充中繼器數據

Question

我想爲我的項目中的一個使用fuelux repeater，但我在向表中填充數據時遇到困難。我使用了文檔中給出的基本轉發器模板，但由於它使用了很多其他插件，如require.js和underscore.js，因此無法正確理解their example。任何人都可以請幫我理解如何做到這一點。基本上我想用php和js將數據導入中繼器。

我有一個jsfiddle設置here與我目前的進展。

<div class="fuelux"> 
    <div class="repeater" id="myRepeater"> 
    <div class="repeater-header"> 
     <div class="repeater-header-left"> 
     <span class="repeater-title">Awesome Repeater</span> 
     <div class="repeater-search"> 
      <div class="search input-group"> 
      <input type="search" class="form-control" placeholder="Search"/> 
      <span class="input-group-btn"> 
       <button class="btn btn-default" type="button"> 
       <span class="glyphicon glyphicon-search"></span> 
       <span class="sr-only">Search</span> 
       </button> 
      </span> 
      </div> 
     </div> 
     </div> 
     <div class="repeater-header-right"> 
     <div class="btn-group selectlist repeater-filters" data-resize="auto"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
      <span class="selected-label">&nbsp;</span> 
      <span class="caret"></span> 
      <span class="sr-only">Toggle Filters</span> 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
      <li data-value="all" data-selected="true"><a href="#">all</a></li> 
      <li data-value="some"><a href="#">some</a></li> 
      <li data-value="others"><a href="#">others</a></li> 
      </ul> 
      <input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/> 
     </div> 
     <div class="btn-group repeater-views" data-toggle="buttons"> 
      <label class="btn btn-default active"> 
      <input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span> 
      </label> 
      <label class="btn btn-default"> 
      <input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span> 
      </label> 
     </div> 
     </div> 
    </div> 
    <div class="repeater-viewport"> 
     <div class="repeater-canvas"></div> 
     <div class="loader repeater-loader"></div> 
    </div> 
    <div class="repeater-footer"> 
     <div class="repeater-footer-left"> 
     <div class="repeater-itemization"> 
      <span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span> 
      <div class="btn-group selectlist" data-resize="auto"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
       <span class="selected-label">&nbsp;</span> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
       <li data-value="5"><a href="#">5</a></li> 
       <li data-value="10" data-selected="true"><a href="#">10</a></li> 
       <li data-value="20"><a href="#">20</a></li> 
       <li data-value="50" data-foo="bar" data-fizz="buzz"><a href="#">50</a></li> 
       <li data-value="100"><a href="#">100</a></li> 
      </ul> 
      <input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/> 
      </div> 
      <span>Per Page</span> 
     </div> 
     </div> 
     <div class="repeater-footer-right"> 
     <div class="repeater-pagination"> 
      <button type="button" class="btn btn-default btn-sm repeater-prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
      <span class="sr-only">Previous Page</span> 
      </button> 
      <label class="page-label" id="myPageLabel">Page</label> 
      <div class="repeater-primaryPaging active"> 
      <div class="input-group input-append dropdown combobox"> 
       <input type="text" class="form-control" aria-labelledby="myPageLabel"> 
       <div class="input-group-btn"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
        <span class="caret"></span> 
        <span class="sr-only">Toggle Dropdown</span> 
       </button> 
       <ul class="dropdown-menu dropdown-menu-right"></ul> 
       </div> 
      </div> 
      </div> 
      <input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="myPageLabel"> 
      <span>of <span class="repeater-pages"></span></span> 
      <button type="button" class="btn btn-default btn-sm repeater-next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
      <span class="sr-only">Next Page</span> 
      </button> 
     </div> 
     </div> 
    </div> 
    </div> 

</div> 

Answer 1

Fuel UX轉發器使用基於JSON的數據源。這意味着您可能會使用AJAX加載JSON文件，然後格式化該數據並將其傳遞給數據源回調。您需要設置JSON數組中的列和鍵/值對之間的連接。

Here is how the repeater in the docs is set up。那JS和你擁有的HTML應該是你所需要的。 Fuel UX不需要AMD/require.js。如果您將Fuel UX下載到供應商文件夾中，則可以使用Here is an example of the use of script tags only。