使用带有JQuery，jQuery Mobile，Knockout和Sammy的requirejs来构建带有外部模板的结构化应用程序时的性能/模板问题

我有一个测试应用程序的设置，其中包括require.js，jQuery，jQueryMobile（jqm），knockout和sammy

require.js加载jqm，knockout和sammy

在应用程序主页面上，我使用sammy加载了knockout viewModels。 这些viewModels模板中的加载..

所以要显示代码……

需要页面：

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）

 
 
 
Products
 Home 
 
 
 
  
 
  

有几个问题

1. 是sammy应该按顺序加载，因为每当我刷新它时会抛出一个错误，即sammy或jquery未定义，因为加载速度太慢我在猜测

2. 在产品页面上，如果有人从主页上加载它，因为jQueryMobile changePage已被调用，但是如果用户然后刷新该页面，那么来自JSON的列表将丢失其所有样式。

我认为这是由于我从模板中呈现页面的方式，然后必须制作列表，但我不能想到另一种方法。

所以我在想（可能不是最好的解决方案），但有没有办法强制刷新一个pageChange？ 还是有人有更好的解决方案？

3。

这是调用外部模板的最佳方式/是否有更好的方法将模板附加到正文中。 我真的认为这样做的时间是造成样式问题的原因，当我添加下一级别的产品时，它开始在此页面上呈现它们，然后再转移到下一个…

我正在努力寻找使用knockout和requirejs加载外部模板的最佳方法。 我希望将模板保留在HTML中，以便团队中的其他人可以轻松地编辑它并提供结构。

这个演示可以在这里看到

http://demo.stg.brightonconsulting.net.au/templates/tests/knockoutJQMProducts/

真的很感激任何帮助

Answer 1

看看你的演示，我可以提出一些建议。

1. 在main.js删除对jqm-config的依赖并将其添加到jqm-config 这样，在运行app.js中的任何内容之前，您始终可以保证设置jquery移动配置。
2. 确保您的ko.applyBindings()调用包装在.ready()构造中。
3. 每次切换页面时，都会将敲除重新绑定到同一节点。 这不是最佳做法，可能会导致一些奇怪的行为。 如果您要这样做，请确保首先取消应用绑定。 看看这里怎么样。

即使修复了所有这些项目，我也不确定你的事情会如何运作。 您可能最好先预先加载所有HTML并将所有页面绑定到具有子视图模型的一个父视图模型。