1

我有一个测试应用程序的设置，其中包括 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");
});    

});

应用程序.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>

有几个问题

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

  2. 在产品页面上，如果有人从主页打开它，它加载正常，因为 jQueryMobile changePage 已被调用，但如果用户随后刷新该页面，来自 JSON 的列表将失去其所有样式..

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

所以我在想（可能不是最好的解决方案）但是有没有办法强制刷新页面更改？或者有没有人有更好的解决方案？

3.

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

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

这个演示可以在这里看到

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

非常感谢任何帮助

4

1 回答 1

1

看看你的演示，我可以建议一些尝试的事情。

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

即使所有这些项目都修复了，我也不确定你处理事情的方式是否会奏效。您最好预先加载所有 HTML 并将所有页面绑定到一个带有子视图模型的父视图模型。

于 2012-11-20T17:33:42.760 回答