結合淘汰賽與sammyjs/pathjs和jQuery的移動

我想結合一些JS庫創建一個手機SPA網站。我正在與knockoutJS合作，因爲它遺漏了路由引擎，所以我從SammyJS或PathJS（尚未決定）採取。我想用jQuery Mobile從它獲取控件和移動設計。結合淘汰賽與sammyjs/pathjs和jQuery的移動

問題是，只要我將jquery mobile js文件包含到我的頁面中，路由引擎就停止工作。實際上它確實有效，但window.location.hash不僅由我改變，而且由jquery mobile本身改變。

因此，這裏的代碼看起來是這樣的：在HTML文件中我有一個div，我綁定到一個模板現在

(function ($) { 
infuser.defaults.templateUrl = "templates"; 
console.log('just before pageinit'); 
$(document).bind('pagecreate', function() { 
    // disable autoInit so we can navigate to bookmarked hash url 
    $.mobile.autoInitializePage = false; 

    // let PathJS handle navigation 
    $.mobile.ajaxEnabled = false; 
    $.mobile.hashListeningEnabled = false; 
    $.mobile.pushStateEnabled = false; 
}); 

$(document).bind('pagebeforechange', function (e, data) { 
    var to = data.toPage; 
    if (typeof to === 'string') { 
     /* var u = $.mobile.path.parseUrl(to); 
     to = u.hash || '#' + u.pathname; 
     // manually set hash so PathJS will be triggered 
     location.hash = to; 
     // prevent JQM from handling navigation*/ 
     e.preventDefault(); 
    } 

}); 
$(document).bind('pagechange', function (e, data) { 
}); 

var Model = function() { 
    this.items = ko.observable(null); 
    this.chosenItemData = ko.observable(); 
    this.state = ko.observable('items'); 

    this.goToItemDetails = function (item) { 
     location.hash = '/details/' + item.id; 
    }; 
}; 
window.currentModel = new Model(); 
ko.applyBindings(window.currentModel); 

Path.map('#home').to(function() { 
    currentModel.state(window.templates.items); 
    currentModel.items(window.dummyData); 
}); 
Path.map('#home/details/:id').to(function() { 
    var self = this; 
    $(currentModel.items()).each(function (index, item) { 
     if (item.id.toString() == self.params['id']) { 
      currentModel.chosenItemData(item); 
      currentModel.state(window.templates.itemDetail); 
     } 
    }); 
}); 

Path.root('#home'); 

$(function() { 
    Path.listen(); 
}) 
})(jQuery);

，你可以看到$.mobile.hashListeningEnabled = false;設置爲false，所以jQuery Mobile的不應該聽取或反應哈希變化。

但是！可以說我從localhost/sammy /＃home移到localhost/sammy /＃home/detail/1 由於某些原因，哈希本身是散列發生變化並立即更改爲localhost/sammy/home/detail/1 ommited並且路線沒有得到執行。

對不起，如果我沒有更好地解釋我自己。我正在將它發佈到服務器上供所有人查看，但不幸的是，這需要時間。

同時，如果任何人有任何想法我可以做什麼來解決這個問題，它會很棒！

來源

2012-12-20 Dimkin

雖然沒有直接回答你的問題，我也分享我的一些combinin的經驗g Knockout和jQueryMobile http://www.scottlogic.co.uk/blog/colin/2012/10/integrating-knockout-and-jquerymobile/整合並非沒有一點痛苦！ – ColinE

通過調試jquery mobile我發現了另一個移動參數：$ .mobile.linkBindingEnabled = false;這禁用了pagechage事件，但散列符號仍然被省略。 – Dimkin

因此很明顯，（和它寫在jQuery Mobile的網站「initmobile」事件觸發的腳本jQuery Mobile的，它重視。爲了能夠的jQuery Mobile的腳本之前，請將以下行應包括事件。

<script type="text/javascript"> $(document).on('mobileinit', function() { $.mobile.ajaxEnabled = false; $.mobile.hashListeningEnabled = false; $.mobile.pushStateEnabled = false; $.mobile.linkBindingEnabled = false; });

然後在jQuery Mobile的的onchangehash事件將被禁用。

來源

2012-12-20 12:03:45 Dimkin

結合淘汰賽與sammyjs/pathjs和jQuery的移動

回答

相關問題