1

require.js、jQuery、jQueryMobile（jqm）、ノックアウト、サミーを含むテストアプリのセットアップがあります

require.jsはjqm、ノックアウト、サミーに読み込まれます

アプリのメインページで、sammyを使用してノックアウト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）

<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から取得したリストのスタイルがすべて失われます。

これは、テンプレートからページをレンダリングしてからリストを作成する方法が原因だと思いますが、別の方法を考えることはできません。

だから私は考えていました（おそらく最善の解決策ではありません）が、更新時にpageChangeを強制する方法はありますか？または誰かがより良い解決策を持っていますか？

3.3。

これは外部テンプレートを呼び出すための最良の方法ですか/テンプレートを本文に追加するためのより良い方法がありますか？それを行うのにかかる時間は、スタイリングの問題を引き起こしていると思います。また、次のレベルの製品を追加すると、次のページに移動する前に、このページでそれらのレンダリングが開始されます。

私は、knockoutとrequirejsを使用して外部テンプレートをロードするための最良の方法を見つけるのに苦労しています。チームの他のメンバーがテンプレートを簡単に編集して構造を作成できるように、テンプレートをHTMLで保持したいと思います。

このデモはここで見ることができます

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

本当に助けてくれてありがとう

4

1 に答える 1

1

あなたのデモを見て、私は試すべきいくつかのことを提案することができます。

  1. main.jsの依存関係を削除し、にjqm-config追加しapp.jsます。そうすれば、何かを実行する前に、jqueryモバイル構成をセットアップしておくことが常に保証されますapp.js。
  2. ko.applyBindings()呼び出しが構成にラップされていることを確認してください.ready()。
  3. ページを切り替えるたびに、ノックアウトを同じノードに再バインドします。これはベストプラクティスではなく、奇妙な動作を引き起こす可能性があります。これを行う場合は、最初にバインディングを適用解除してください。ここで方法を参照してください。

これらすべての項目を修正しても、あなたのやり方がうまくいくかどうかはわかりません。すべてのHTMLを事前にロードし、すべてのページをサブビューモデルを使用して1つの親ビューモデルにバインドする方がよい場合があります。

于 2012-11-20T17:33:42.760 に答える