0

多くのビューとサーバー呼び出しを含める必要がある大きなハイブリッド モバイル アプリケーション (PhoneGap/HTML5) を開発しています。インターネットでいくつか検索した結果、RequireJS、Backbone、および jQuery Mobile を使用してコードを整理できることがわかりました。私はこのチュートリアルに従いましたが、これは非常に役に立ちますが、私は本当に満足していません...

問題は、リンクまたはボタンを押すと各ビューが RequireJS によって読み込まれ、前のビューのコンテンツが置き換えられることです... つまり、間に<body></body>ある HTML コード全体が新しいビューのコンテンツに置き換えられます。また、以前のコードを置き換えずに新しいコードを追加することにした場合、アプリケーションがユーザー フレンドリーでなくなるリスクがあります。

すべてのビューを分離して複数の HTML ファイルに配置し、すべての HTML ファイルを読み込んで本体に追加する Javascript を作成することを考えましたが、これが良い方法であるかどうか、および私のアプリケーションが非常にユーザーフレンドリーになります。コードを整理する方法の例を次に示します。

<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <!-- ... -->
    </head>

    <body>
        <!-- Here will be added the content of all the other HTML files -->
    </body>
</html>


<!-- homeView.html -->
<div data-role="header" data-theme="f">
    <h1 data-i18n="sections.home.title"></h1>
</div>

<div data-role="content">
    <h1 data-i18n="sections.home.welcome"></h1>
</div>


<!-- otherView.html -->
<div data-role="header" data-theme="f">
    <h1 data-i18n="sections.otherView.title"></h1>
</div>

<div data-role="content">
    <p data-i18n="sections.otherView.content"></p>
</div>

皆さんはそれについてどう思いますか? 誰もがより良い解決策を持っていますか? 私の目標は、強力で流動的で保守可能なアプリケーションを構築することです。

ご協力いただきありがとうございます。

4

1 に答える 1

2

私の経験からすると、Backbone を使用すると、ビューをどのように表示するかをより細かく制御できます。「すべてを置き換える」か「現在の HTML に追加する」かを選択することなく、ビューの一部のみを置き換えることができるはずです。

ビューを複数の HTML ファイルに分割することは一般的には良い考えです (特にアンダースコアなどでテンプレートを使用できる場合)。

あなたの質問に答えると思われる場合は、より詳細な例を挙げますが、基本的には、リンクまたはボタンを押すと、そのイベントをキャッチして、全体を置き換えることから、好きなことを行うことができます単一の要素を変更するだけです。

編集: ここで残りの質問にお答えします。最初にhttp://backboneboilerplate.com/を見てください。これは、バックボーン アプリケーションを構築する方法のかなり良いデモです。特に、ビューの作成を処理するビュー マネージャー (vm.js) を使用します。

このようなものを使用すると、ビューの最後のインスタンスをメモリに保持できます。たとえば、ニュース アイテムをクリックすると、ルーターが /news/item/xx に移動し、ビュー マネージャーを使用してニュース アイテムを作成し、モデルに localStorage を入力します (既にフェッチしている場合)。コンテンツ) またはサーバーをポーリングします。ビュー マネージャーのコードを見ると、次のようなものがあります。

define([
  'jquery',
  'underscore',
  'backbone',
  'events'
], function($, _, Backbone, Events){
  var views = {};
  var create = function (context, name, View, options) {
    if(typeof views[name] !== 'undefined') {
      if (name === "homeview") {
        views[name].reinit(); // <==== re-initialize your view
        return views[name];
      }
      else {
        views[name].undelegateEvents();
        if(typeof views[name].clean === 'function') {
          views[name].clean();
        }
      }
    }
    var view = new View(options);
    views[name] = view;
    if(typeof context.children === 'undefined'){
      context.children = {};
      context.children[name] = view;
    } else {
      context.children[name] = view;
    }
    Events.trigger('viewCreated');
    return view;
  };


  return {
    create: create
  };
});

そうすれば、ビュー マネージャーはホーム ビューをメモリに保持し、ホーム ビューに戻るたびに再初期化して返します (私は .reinit() を呼び出しましたが、ビューを以前に保存した状態にリセットするカスタム関数である可能性があります)。そしてそれをレンダリングします）

于 2013-08-02T13:23:47.047 に答える