jquery mobile style不适用于第二次导航到详情页

Posted 2023-05-09

【中文标题】jquery mobile style不适用于第二次导航到详情页

【英文标题】：Jquery mobile style does not apply in second time navigation to the details page

【发布时间】：2014-06-10 14:02:02

【问题描述】：

当我第二次导航到详细信息页面时，页面变得裸露，所有样式都从页面中消失，我可以找出原因，例如http://jsfiddle.net/Hpyca/24/

html

<div data-role="page" id="dashBoardPage" data-bind="with: dashboardData">
   <button type="button" data-bind="click: goToList">DashBoard!</button>
</div>
<div data-role="page" id="firstPage" data-bind="with: hospitalList">
   <div>
      <div id="listViewDiv">
         <ul data-role="listview" data-bind="foreach: hospitals">
            <li data-bind="click: $parent.selectHospital">
               <h2>Hospital Id:<span data-bind="text:id"></span></h2>
               <p>Name <span data-bind="text:name"></span></p>
            </li>
         </ul>
      </div>
   </div>
</div>
<div data-role="page" id="detailsView" data-bind="with: hospitalList.selectedHospital">
   <a href="#firstPage">Back</a>
   <a href="#dashBoardPage">Home</a>
   <div>
      <div data-role="tabs" id="tabs">
         <div data-role="navbar">
            <ul>
               <li><a href="#one" data-ajax="false">Info</a></li>
               <li><a href="#two" data-ajax="false">Details</a></li>
            </ul>
         </div>
         <div id="one" class="ui-body-d ui-content">
            <h2>Hospital Id : <span data-bind="text:id"></span></h2>
         </div>
         <div id="two">
            <h2>Id : <span data-bind="text:id"></span></h2>
            <input data-mini="true" tabindex="5" data-bind="value: name"
               id="name"/>
         </div>
      </div>
   </div>
</div>

js

function NavigationService()
    var self = this;

    self.navigateTo = function(pageId)
        $.mobile.changePage($('#' + pageId));
    ;

//You need to determine if you want to handle dependencies using requirejs or just global variables.
var navigationService = new NavigationService();

function HospitalViewModel(data)
    var self = this;
    self.id = data.id;
    self.name = ko.observable(data.name);


function DashboardViewModel(data)
    var self = this;

    self.goToList = function()
        navigationService.navigateTo('firstPage');
    ;


function HospitalListViewModel(data)
    var self = this;

    self.hospitals = data;
    self.selectedHospital = ko.observable();

    self.selectHospital = function(hospital)
        self.selectedHospital(hospital);
        navigationService.navigateTo('detailsView');
    ;


function PageViewModel()
    var self = this;

    //This list should be retrieved from a service of some kind
    var allHospitals = [
        "id":"001","name":"Hospital1","location":"SL",
        "id":"002","name":"Hospital2","location":"SL"
    ].map(function(hospital)return new HospitalViewModel(hospital););

    self.hospitalList = new HospitalListViewModel(allHospitals);
    self.dashboardData = new DashboardViewModel();


ko.applyBindings(new PageViewModel());

要重现问题， 点击(DashBoard)-->点击(ListElement)-->点击(Back,Home)-->点击(再次列表元素-->进入详情页)，现在可以看到裸UI了，

【参考方案1】：

问题来自 KnockoutJS “with:” 语句。

我的猜测是，当 ko.observable 为空时，“with:”会将奇怪的属性“可见”或“显示”变为 false，然后 Jquery（移动）尝试使用该属性来应用样式，但无法找到带有选择器的 DOM 项。疯狂的是我没有找到任何记录该问题的来源？

我之前用一些 Jquery 插件试验过类似的问题（日期选择器，屏蔽输入...），我找到的解决方案是在绑定 observable 后重新应用 Jquery 插件。

不幸的是，这种“hack”在您的情况下没有用，因为 Jquery Mobile 不是通过 javascript 手动应用的。我寻找某种“刷新”Jquery Mobile 的方法，但没有结果。

所以我想出了一个解决方案，删除“with:”语句，调用完整的属性名称并在 observable 中绑定一个空的“hospital”，以防止空引用异常。

JsFiddle

<span data-bind="text:hospitalList.selectedHospital().id"></span>

self.selectedHospital = ko.observable(id:"",name:"",location:"");

这个解决方案远非理想，而且没有真正的可扩展性。但是，另一种方法是检查两个库的代码以识别“冲突”。

希望对你有帮助！

【讨论】：

是的，这种方式也适用于我，但是我如何在这个对象范围内调用函数，我已经更新了jsfiddle.net/Hpyca/28，我可以使用淘汰赛“模板”，而不是“与”

@ExCode 是的，您可以使用敲除模板并在对象范围内调用函数；但这不是（总是）必要的。处理函数中的第一个参数将包含当前模型的值。见updated fiddle（去医院详情）。这有帮助吗？

@rwisch45 感谢您的回复。在您更新的代码中 (jsfiddle.net/Hpyca/29) css 错误仍然存​​在，我想解决 css 问题。要重现该问题，请单击（仪表板）-->点击(ListElement) --> 点击(Back,Home) --> 点击(再次列表元素 --> 进入详情页)，现在可以看到裸UI了，

@ExCode 我更新了你的小提琴 (jsfiddle.net/Hpyca/31)。只需在包含完整视图模型的函数中添加 data 参数，然后您就可以查找它，获取 selectedHospital 并使用它。

谢谢@Yoann，我们不能为同一个对象使用两个模板吗？，在我的实际实现中，我有3个标签

【参考方案2】：

为您找到了答案，我已经updated your original fiddle - 现在正在按预期工作。所做的唯一更改是您的NavigationService，如下所示：

function NavigationService() 
    var self = this;

    self.navigateTo = function (pageId) 
        $.mobile.changePage($('#' + pageId));
        $('#detailsView').trigger('create'); // add this line
    ;

这里还有一些关于 SO 的其他问题可以解决这个问题：

Forcing jQuery Mobile to re-evaluate styles/theme on dynamically inserted content jQuery Mobile does not apply styles after dynamically adding content