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。