如何在動態客戶端模板中從主幹視圖呈現jQuery Mobile？

我正在使用Brunch構建移動網站。我想用jQuery Mobile。如何在動態客戶端模板中從主幹視圖呈現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) 

    @

這是不行的，我懷疑這是因爲骨幹「內噴射」 jQuery Mobile的前或後的HTML被初始化或者其他的東西？

我可以使用Firebug和Chrome的Inspect Element檢查標記，但div元素設置爲display：none; （如此反覆，這似乎指向jQuery Mobile的不初始化或類似的東西）

./templates/home是一個簡單的「生態」模板一些基本的jQuery Mobile的標記，它看起來像這樣：（和被注入身體標記）

<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和谷歌的解決方案，但沒有設法把它關閉。任何提示將不勝感激。謝謝！

來源

2012-02-13 Gijs

如某處在this question評論說，你可以渲染你的頁面之後：

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

這將迫使jQuery Mobile的更新您的網頁，並解決您的問題。

來源

2012-02-13 22:31:09

按桑德爾但我走近這個方式是在'pagebeforeshow'觸發'create'事件如下：

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

這將適用於所有您的DOM的重新渲染過程中損失的造型。

來源

2012-03-06 10:16:49

在渲染功能的嘗試：

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

// your code 

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

這工作對我很好;）

來源

2012-04-16 10:18:34 KillWil

以上這些問題的答案，涉及使用$(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}); 
});

來源

2014-03-13 14:36:39 madasha

如何在動態客戶端模板中從主幹視圖呈現jQuery Mobile？

回答

相關問題