2012-07-29 2 views
2

jquery 모바일 페이지에서 Handlebarsjs를 사용하고 있으며 서버에서 데이터를 다시 게시하면 템플릿에 삽입됩니다 ... jquery 모바일 CSS 스타일 중 아무 것도 템플릿 안의 코드에 적용되지 않습니다.Handlebarsjs 템플릿에 jquery 모바일 CSS 스타일이 없습니까?

내 템플릿은 다음과 같습니다

위의 코드 블록이 정렬되지 않은 목록에 삽입
  <script id="card_list_template" type="text/x-handlebars-template"> 
      {{#each this}} 
      <li> 
       <a href="#"> 
        <img src="{{path}}" /> 
        <h3>{{first_name}}&nbsp;{{last_name}}</h3> 
        <p>Card Owner:&nbsp;{{user_id}}</p> 
       </a> 
      </li> 
      {{/each}} 
     </script> 

:

<ul id="search_results" data-role="listview" data-theme="a">

데이터-역할 = "목록보기"가를 적용하도록되어 특정 스타일을 목록 항목에 추가하지만 템플릿을 통해 생성 된 항목에는 작동하지 않습니다.

+0

가능한 복제본 [jQuery Mobile은 동적으로 내용을 추가 한 후에 스타일을 적용하지 않습니다.] (http://stackoverflow.com/questions/7999436/jquery-mobile-does-not-apply-styles-after-dynamically-adding-content) –

+0

아무것도 ?? 나는 누군가가 이것에 앞서 달려 있다고 확신합니다 ... –

답변

9

요소에 .trigger('create')을 호출하면 스타일을 적용해야합니다.

예 :

var template = Handlebars.compile(source); 
var html = template(output); 
$('#handlebarsData').html(html); 
// Applies jQuery Mobile styles 
$('#handlebarsData').trigger('create'); 
+0

만약 내가 할 수 있다면 12 표를 줄 것입니다. 고맙습니다! – neoscribe

0
.trigger('create') 

가 정렬되지 않은 목록을 나에게 도움이되지 않았다. 그러나

$('ul').listview('refresh'); 

했습니다.

관련 문제