Question

我正在研究使用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标签没有属性。

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

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

没有运气。

我被困在这里的人们，我将非常感谢您提出的解决方案

由于

Answer 1

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

$('#pageID').on('pagebeforeshow', function() {
 $('[data-role=listview]').listview('refresh');
});

更改页面时的Listview样式问题

1 个答案: