我有一个测试应用程序的设置，其中包括 require.js、jQuery、jQueryMobile (jqm)、knockout 和 sammy
require.js 在 jqm、knockout 和 sammy 中加载
在应用程序主页上，我使用 sammy 加载淘汰赛视图模型。这些视图模型加载到模板中。
所以要显示代码...
需要页面：
require.config({
jquery: 'vendor/jqm/jquery_1.7_min',
jqm: 'vendor/jqm/jquery.mobile-1.1.0',
knockout: 'vendor/knockout/knockout-2.2.0',
sammy : 'vendor/sammy/sammy',
text: 'vendor/require/text',
views: '../views',
templates: '../templates'
}
});
define(['app','jqm-config'], function(app) {
$(document).ready(function() {
console.log("DOM IS READY");
});
});
app.js
define(['jquery','knockout', 'sammy','views/home/home', 'views/products/products', 'jqm'],
function($, ko, sammy, appViewModel, productsViewModel) {
var self = this;
self.goHome = function() {
ko.applyBindings(new appViewModel());
};
self.goProducts = function() {
ko.applyBindings(new productsViewModel());
};
Sammy(function() {
this.get('#home', function() {
self.goHome();
});
this.get('#products', function() {
self.goProducts();
});
this.get('', function() {
self.goHome();
});
}).run();
});
产品页面
define(['jquery', 'knockout','text!templates/test2.html', 'jqm'],
function($, ko, productsViewTemplate){
function ProductType(id, name) {
var self = this;
self.id = id;
self.name = name;
}
return function productsViewModel() {
$('body').append(productsViewTemplate);
var self = this;
self.products = ko.observableArray();
var jqxhr = $.getJSON("data/product.json")
.success(function(data, status, xhr) {
self.products.removeAll();
$.each(data.data.productTypeList, function(i,item){
self.products.push(new ProductType(i, item.longName));
})
})
.error(function() { alert("error"); })
.complete(function() {
$.mobile.changePage( '#products', { transition: "pop"});
});
}
});
产品 html (text2.html)
<div data-role="page" data-theme="c" class="ui-page" id="products">
<div data-role="header" data-position="fixed">
<h1>Products</h1>
<a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-bind="foreach: products" >
<li>
<a data-bind="attr:{href:'#products/list/' + id}, text: name"></a>
</li>
</ul>
</div>
有几个问题
sammy 应该按这个顺序加载吗，因为当我刷新时，它会时不时地抛出一个错误，因为我猜加载速度太慢，所以 sammy 或 jquery 未定义
在产品页面上，如果有人从主页访问它，它会正常加载，因为 jQueryMobile changePage 已被调用，但如果用户随后刷新该页面，来自 JSON 的列表将丢失所有样式。
我认为这是由于我从模板渲染页面然后
必须列出清单，但我想不出其他方法。
所以我在想（可能不是最好的解决方案）但是有没有办法在刷新时强制 pageChange ？或者有人有更好的解决方案吗？
3.
这是调用外部模板的最佳方法/是否有更好的方法将模板附加到正文。我真的认为这样做所花费的时间是导致样式问题的原因，而且当我添加下一个级别的产品时，它开始在该页面上呈现它们，然后再移动到下一个。
我正在努力寻找使用淘汰赛和 requirejs 加载外部模板的最佳方法。我想将模板保留为 HTML 格式，以便团队中的其他人可以轻松编辑它并给出结构。
这个演示可以在这里看到
http://demo.stg.brightonconsulting.net.au/templates/tests/knockoutJQMProducts/ http://demo.stg.brightonconsulting.net.au/templates/tests/knockoutJQMProducts/
非常感谢任何帮助
