如何在主干视图的动态客户端模板中呈现 jQuery Mobile? [英] How to render jQuery Mobile in dynamic clientside templates from a Backbone view?

问题描述

我正在使用 Brunch 构建一个移动网站.

对于用户界面，我想使用 jQuery Mobile.

我开始像这样调整现有的 home_view (Backbone.View):

类exports.HomeView 扩展Backbone.Viewid: '主视图'渲染:->console.log "render() 主页"$(@el).html 需要('./templates/home')$.mobile.changePage('#homepage', 'slide', false, false)控制台日志 $(@el)@

这不起作用，我怀疑这是因为 Backbone 在 jQuery Mobile 初始化之前或之后注入"了 html 之类的?

我可以使用 Firebug 和 Chrome 的 Inspect Element 检查标记，但 div 元素设置为 display:none;(所以这似乎再次指向 jQuery Mobile 没有初始化或类似的东西)

./templates/home 是一个简单的生态"模板，带有一些基本的 jQuery Mobile 标记，它看起来像这样:(并被注入到 body 标签中)

我在 SA 和 Google 上搜索了解决方案，但没有成功.任何提示将不胜感激.谢谢！

解决方案

如评论中某处所述 这个问题，你可以在渲染你的页面后这样做:

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

这将强制 jQuery Mobile 更新您的页面并解决您的问题.

I'm building a mobile website using Brunch.

For the user interface, I want to use jQuery Mobile.

I started out adapting the existing home_view (Backbone.View) as such:

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)

    @

This doesn't work, and I suspect it's because Backbone 'injects' the html before or after jQuery Mobile is initialized or something?

I can inspect the markup using Firebug and Chrome's Inspect Element, but the div elements are set to display:none; (so again this seems to point to jQuery Mobile not initializing or something like that)

./templates/home is a simple 'eco' template with some basic jQuery Mobile markup, and it looks like this: (and gets injected into the body tag)

<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>

I've searched around SA and Google for solutions but didn't manage to pull it off. Any tips would be highly appreciated. Thanks!

解决方案

As stated somewhere in a comment on this question, you can do this after rendering your page:

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

This will force jQuery Mobile to update your page and fix your problem.

这篇关于如何在主干视图的动态客户端模板中呈现 jQuery Mobile?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！