Question

看哪：页脚模板：

<!-- Templates -->
<script type="text/template" id="templateFooter">
    <div data-role="navbar">
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
</script>

在我拥有的每个移动页面中：

<div data-role="footer" data-position="fixed">footer</div>

我目前正在加载模板的方式是：

$(function() {
    $('div[data-role=footer]').html($('#templateFooter').html());
    $.mobile.activePage.trigger('create');
});

这很有用，但我真的不喜欢使用$（function（），但是如果任何页面显示我需要加载它，所以pageinit或pageshow没有帮助。我会成为如果有任何帮助，请使用knockout.js。

有更好的方法吗？

Answer 1

function getTemplateFooter() {
    //return footer text here
}


$("div:jqmData(role='page')").live("pagebeforecreate",function() {
    // get the footer of the page        
    // if footer doesn't exist on page, insert it where you want it... in this case after role="content"?
    var $content =$(this).page().find('div:jqmData(role="content")');
    $content.after(getTemplateFooter());
}

Answer 2

还有一个pageshow事件，即使用户导航到该页面，也会通过后退按钮按下等来触发...它会冒泡到页面div

我将它用于可能在后续访问之间更改大量动态数据的页面，或者甚至在用户刚刚按下时

如何为所有jQuery Mobile页面使用模板？

2 个答案: