KendoUi 모바일 데이터 바인딩을 사용하여 Wordpress

Question

나는 새로운 검도 모바일 응용 프로그램을 만들고 있는데, 더 많은 기능을로드하려면 클릭하여 목록보기에 Wordpress 게시물을 바인딩하려고 시도하고 있습니다. 나는 그저 작동하지 않는 것 같다. 제발 좀 도와주세요.

<div data-role="view" id="home" data-layout="main-layout" data-title="MaskJams" data-init="mobileListViewPressToLoadMore"> 
    <header data-role="header"> 
     <div data-role="navbar"> 
      <span data-role="view-title"></span> 
     </div> 
    </header> 

    <ul id="load-more"></ul> 
<script type="text/x-kendo-tmpl" id="load-more-template"> 
    <div class="product"> 
     <img src="#=data.posts.thumbnail_images.medium#" alt="#:data.posts.title#" class="pullImage"/> 
     <h3>#:data.posts.title#</h3> 

    </div> 
</script> 

<script> 
    function mobileListViewPressToLoadMore() { 
     var dataSource = new kendo.data.DataSource({ 
      type: "json", 
      transport: { 
       read: { 
        url: "http://www.maskjams.com/api/get_recent_posts/?callback=callback" 
       } 
      }, 
      serverPaging: true,    
      pageSize: 20 
     }); 

     $("#load-more").kendoMobileListView({ 
      dataSource: dataSource, 
      template: $("#load-more-template").text(), 
      loadMore: true 
     }); 
    } 
</script> 

</div> 

Answer 1

그냥 몇 가지, 당신은 꽤 가깝습니다. 데이터 소스에서 전체 데이터 소스의 유형이 아닌 읽기 객체의 dataType을 "jsonp"로 설정해야합니다. 또한 데이터가 "posts"콜렉션에 다시 오므로 schema.data에이를 정의해야합니다. 당신이 제대로 schema.data을 참조하는 경우

var dataSource = new kendo.data.DataSource({ 
    transport: { 
    read: { 
     url: "http://www.maskjams.com/api/get_recent_posts/", 
     dataType: "jsonp" 
    } 
    }, 
    schema: { 
    data: "posts" 
    }, 
    serverPaging: true,    
    pageSize: 20 
}); 

$("#load-more").kendoMobileListView({ 
    dataSource: dataSource, 
    template: $("#load-more-template").text() 
}); 

var app = new kendo.mobile.Application($(document.body)); 

, 당신은 data.posts.title, 또는 data.posts.thumbnail_images, 단지 제목과 thumbnail_images 필요하지 않습니다.

<ul id="load-more"></ul> 
<script type="text/x-kendo-tmpl" id="load-more-template"> 
    <div class="product"> 
     <img src="#=thumbnail_images.medium.url#" alt="#-title#" class="pullImage"/> 
     <h3>#=title#</h3> 

    </div> 
</script> 

은 http://jsbin.com/uKAFeMo/2/edit