2016-08-22 24 views
0

我在我的應用程序中使用flipster轉盤卡。當我靜態綁定卡片值時,我的卡片視圖會很好。當我動態獲取carousal類的值不會生成。我只是得到一架飛機並傳播卡片。當手動將數據提供給<li>標記時,那麼flipster工作正常。當使用AJAX將數據動態傳遞給<li>時,Flipster未顯示出來。flipster轉盤卡的動態綁定

靜態綁定:(WORKING FINE)

<ul id="flipsterCard" class="flip-items"> 
    <li data-flip-title="layout 1"> 
    <a onclick="updatevariable()" class="Button Block" 
     style="background-color: #8d65ff;"> 
     <h1>layout 1</h1> 
     <!-- <p>View name</p> 

<img src="resources/images/icon_No_Logo.jpg" width="42" height="42"> 

<p>comments</p> --> 
    </a> 
    </li> 
    <li data-flip-title="layout 2" > 
    <a onclick="updatevariable()" class="Button Block" 
     style="background-color: #6859fb;"> 
     <h1>layout 2</h1> 
     <!-- <p>The bare minimum code needed to implement Flipster</p> --> 
    </a> 
    </li> 
</ul> 

動態結合(類沒有得到加載)

function getcard() 
{ 
    $.ajax({ 
    type : "GET", 
    url : context2 + 'getCards?coreId='+coreId, 
    contentType : "application/json", 
    dataType: 'json', 
    async : false, 
    success: function(data) { 
     var $cardList = $('#flipsterCard'); 
     $.each(data, function(i, item) { 
     $('<li class="flipster__nav__item">') 
     .append($('<a onclick="updatevariable();" class="Button Block" style="background-color: red";>')) 
     .append($('<p>').html(item.workspaceViewName)) 
     .append($('<p>').html(item.comments)) 
     $('<img />').attr('src', "item.imgUrl")// ADD IMAGE PROPERTIES. 
     .width('113px').height('113px').appendTo($cardList); 
     }); 
    } 
    }); 
} 

http://brokensquare.com/Code/jquery-flipster/demo/

回答

0

當您動態更改要渲染的項目數量時,您必須執行flipster('index')