Как визуализировать jQuery Mobile в динамических клиентских шаблонах из представления Backbone? - PullRequest
Новая
       25

Как визуализировать jQuery Mobile в динамических клиентских шаблонах из представления Backbone?

4 голосов
/ 13 февраля 2012

Я создаю мобильный сайт, используя Поздний завтрак .

Для пользовательского интерфейса я хочу использовать jQuery Mobile .

Я начал адаптировать существующий home_view (Backbone.View) так: 

class exports.HomeView extends Backbone.View
  id: 'home-view'

  render: ->
    console.log "render() homepage"

    $(@el).html require('./templates/home')

    $.mobile.changePage('#homepage', 'slide', false, false)
    console.log $(@el)

    @

Это не работает, и я подозреваю, что это потому, что Backbone "внедряет" html до или после инициализации jQuery Mobile или что-то в этом роде?

Я могу проверить разметку с помощью Firebug и Chrome Inspect Element, но для элементов div установлено отображение: none; (опять же, это указывает на то, что jQuery Mobile не инициализируется или что-то в этом роде)

. / Templates / home - это простой шаблон «eco» с некоторой базовой разметкой jQuery Mobile, который выглядит следующим образом: (и вставляется в тег body) 

<div data-role="page" id="homepage">
    <div data-role="navbar">
        <ul>
            <li><a href="/" class="ui-btn-active">Home</a></li>
        <li><a href="#helppage">Help</a></li>
    </ul>
    </div><!-- /navbar -->

    <div data-role="content">
        <div id="home">
            <h1>Home</h1>
        </div>
    </div>
</div>

Я искал в SA и Google решения, но не смог их осуществить. Любые советы будут высоко оценены. Спасибо!

Ответы [ 4 ]

7 голосов
/ 14 февраля 2012

Как указано где-то в комментарии к этому вопросу , вы можете сделать это после рендеринга вашей страницы: 

$("#pageId").trigger("create");

Это заставит jQuery Mobile обновить вашу страницу и исправить вашу проблему.

3 голосов
/ 16 апреля 2012

В вашей функции рендера попробуйте: 

render:function(){
var container = this.options.viewContainer;

// your code

container.html($(this.el));
container.trigger('create');
return this;
}

Это прекрасно работает для меня;)

1 голос
/ 06 марта 2012

Согласно Шандору, но я подошел к этому так, чтобы вызвать 'create' во время 'pagebeforeshow' следующим образом: 

$('#pageId').bind('pagebeforeshow', function(event) {
   var currentPage = event.currentTarget;
   $(currentPage).trigger('create');
});

Это позволит применить все стили, которые вы потеряли во время повторного рендеринга вашего DOM.

0 голосов
/ 13 марта 2014

Ответы выше, включающие использование $(currentPage).trigger('create');, решают проблему, но поскольку исправление применяется впоследствии (после того, как страница представления была отображена и отображена $.mobile.changePage()), пользователь получает неприятный побочный эффект: просмотр мерцаний из-за изменения стиля, примененного jquery mobile.

Мое решение проблемы состояло в том, чтобы вызвать пользовательское событие из представления после завершения динамического рендеринга и связать $.mobile.changePage() с этим событием. Это приводит к тому, что вывод будет «буферизован» до завершения, а затем полностью стилизован.

Вот пример:

В функции initialize моего представления у меня есть код, ожидающий события, которое будет запущено моделью / коллекцией при получении, и функция для отображения динамической части html: 

window.MyView = Backbone.View.extend({

// some other code here

initialize: function() {
    this.listenTo(this.collection, "fetchCompleted:CollectionName",  this.renderRows);
},

renderRows: function (eventName) {
    $(this.el).find('div[class="content-primary"]').html(this.template_ul({data: this.collection}));
    this.trigger( 'view:ready' );
},
//...

... тогда в роутере у меня есть следующий код для changePage(): 

myViewObject.on( 'view:ready', function() {
    $.mobile.changePage($(next.el), {changeHash:false, transition: transition});
});
...