Доступ к JQuery мобильных элементов по роли

Question

Я 90% уверен, что я делаю это 100% неправильно:

Я строю приложение PhoneGap + JQuery Mobile, и я пытаюсь построить столько кода повторного использования как я могу в приложение. У меня есть один файл html, с несколькими

<div data-role="page" id="page_name"> 

элементов на странице страницы приложения. Каждый элемент страницы имеет типичный:

<div id="header" data-role="header"> 
</div><!-- /header --> 

<div data-role="content"> 
<p>Page Info</p> 
</div><!-- /content --> 

И, наконец:

<div data-role="footer" data-id="footnav" data-position="fixed"> 
    <div data-role="navbar"> 
     <ul><li></li></ul> 
    </div><!-- /navbar --> 
</div><!-- /footer --> 
</div><!-- /page --> 

Теперь, в духе повторного использования, я хочу, чтобы заполнить данные-роль = «NavBar» див с той же самой вещи, так Я бросил вместе шаблон усы, как:

function doNavigationMenu() { 
    var navdata = { 
    navlist: [ 
     { href : "ixinfo", text: "Ix" }, 
     { href : "ptinfo", text: "Px" }, 
     { href : "dxinfo", text: "Dx" }, 
     { href : "rxinfo", text: "Rx" }, 
     { href : "txinfo", text: "Tx" } 
    ] 
    }; 

    var template = "{{#navlist}}<li><a href='#{{href}}'>{{text}}</a></li>{{/navlist}}"; 
    var content = $.mustache(template, navdata); 
    console.log(content); 
    $(".navbar ul").html(content); **//<<< this doesn't work** 
    $(".footnav").trigger('create'); **//<<<This doesn't work** 
} 

Эта функция называется событием PhoneGap onDeviceReady, обеспечивая приложение готово для меня гадость с HTML. Но поскольку я изменяю контент после того, как классы CSS применяются jQuery mobile, и поскольку это одна страница (чтобы избежать необходимости создания HUGE state machine), стили jQuery Mobile отсутствуют на первой «странице». Я изначально дал всем navbar div один и тот же идентификатор, но это просто глупо, но единственная вещь, которую я должен выбрать, - это data-role="navbar", и я не знаю, как это сделать. Я читал, что мне нужно запустить .trigger('create') на всех моих навигаторах, но я не понимаю, как это сделать.

Подводя итог: Я хочу использовать один файл html с несколькими страницами, но использовать шаблоны усов, чтобы упростить обслуживание и размер кода в мобильном приложении и не знаю, как это сделать.

Answer 1

Посмотрите на мою скрипку,

http://jsfiddle.net/idangozlan/27QMM/1/ 

Вы не использовали правильный селектор, который должен быть $('[data-role="navbar"]') ..