1

我正在使用 jquery mobile 以及 MVC4 平台上的 knockout.js 绑定来开发单页应用程序。

这是我在主 div 页面上的按钮：

<div data-role="page" id="pageMain">
 <div data-role="content">
    <a href="#" id="btnExisting" data-bind="click: $root.GetHeader"   data-role="button"   data-theme="b"">View Invoices</a>
 </div> 
</div>

这是我的目标 div 页面：

<div data-role="page" id="pageExisting">
    <div data-role="header">
        <h1>Existing Invoices's</h1>
        <a data-rel="back" data-role="button">Back</a>
    </div>
    <div class="choice_list" data-role="content" data-bind="visible: Headers().length > 0">

        <ul id="headersList" data-role="listview" data-bind="foreach: Headers" data-filter-placeholder="Search Invoice" data-filter-theme="a" data-inset="true"
            data-filter="true" data-theme="b">

            <li>

                <a href="#" data-inline="true">

                    <h2>Invoice No.: <span data-bind="text: inv_no"></span></h2>

                    <p>Amount.: <span data-bind="text: inv_amt"></span></p>
                </a>
        </ul>

    </div>
</div>

这是脚本部分：

var HeaderViewModel = function () {
        //Make the self as 'this' reference
        var self = this;
     self.Headers = ko.observableArray([]);
function GetHeaders() {
        //Ajax Call Get All Employee Records
        // self.GetHeaders = function () {

        $.ajax({
            type: "GET",
            url: "/api/InvAPI",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                self.Headers(data); 


            },
            complete: function () {
                $.mobile.changePage("#pageExisting");

            },
            error: function (error) {
                alert(error.status + "<--and--> " + error.statusText);
            }
        });

    }
self.GetHeader = function () {
        GetHeaders();
    }
   };


$(document).ready(function () {
 ko.applyBindings(new HeaderViewModel());
}

当我点击“查看发票”按钮时，我得到了一个典型的 Jquery 移动格式列表视图，但问题是当我点击后退按钮并再次导航到“PageExisiting”div 页面时，我得到了没有样式的列表数据..

在这两种情况下查看页面源代码时，我注意到在第二次导航时；li 标签没有属性。

我尝试了一些解决方案，例如：列表视图刷新、页面销毁、页面创建之前的行：

$.mobile.changePage("#pageExisting");

没有运气。

我被困在这里，我会很感激你提出的解决方案

谢谢

4

1 回答 1

0

在显示页面之前刷新列表视图。

$('#pageID').on('pagebeforeshow', function() {
 $('[data-role=listview]').listview('refresh');
});
于 2013-04-20T23:53:16.543 回答