2

複数のモデル、ビュー、コレクション、およびテンプレートを含む backbone.js アプリケーションがあります (_.template($(id).html( ))))。

現在、上記のすべてが単一のファイルに含まれているため、非常に見苦しくなります。これはオフライン アプリケーションです (つまり、ローカル ファイルシステムからロードされ、クロスオリジン リクエストを許可する Web サーバーと通信します)。ビュー、モデル、およびテンプレートを別のファイルに移動する方法を理解しようとしてきました。ビューとモデルをviews.jsとmodels.jsに移動しようとしましたが、ビューはテンプレートとテンプレートに依存しますviews.js に入れることはできません (JS ファイルであるため、script タグを含めることはできません..)。

この時点での私の唯一の解決策は、テンプレートをグローバル変数に移動することのようです。これは、必要な JavaScript 文字列エスケープ/複数行文字列を除いて問題ありません..

これは通常どのように処理されますか？

ありがとう！

4

3 に答える 3

4

RequireJSを使用してビューとモデルをモジュールにパッケージ化すると、RequireJS が依存関係の解決を処理します。1 つの views.js または models.js にすべてを配置する代わりに、この方法でファイルごとに 1 つのビューまたはモデルを取得することもできます。

次に、text!プラグインを使用してテンプレートをテキスト ファイルに保存し、通常のモジュールのように要求します。

define(function (require, exports, module) {
  var templateText = require("text!./person.tmpl");
  var $ = require("jquery");

  exports.PersonView = Backbone.View.extend({
    render: function () {
        doStuffWith(_.template(templateText));
    }
  });
});
于 2012-01-27T21:56:06.760 に答える
2

Backbone と RequireJS を使用するこれらのスターター アプリケーションを見てください。

これには Backbone.LocalStorage が含まれており、オフラインでの作業に役立ちます。

https://github.com/jcreamer898/Savefavs

この他のものは、アプリを構築するための単純なスターターです...

https://github.com/jcreamer898/RequireJS-Backbone-Starter

テンプレートを処理する方法は...

define([
        'jquery', 
        'backbone',
        'underscore', 
        'models/model',
        'text!templates/main.html'], 
function($, Backbone, _, model, template){
    var MyView = Backbone.View.extend({
        initialize: function(){
            this.template = _.template(template);
        },
        render: function(){
            this.template(model);
        }
    });
    return new MyView();

});

于 2012-01-28T14:45:43.123 に答える
1

Backbone ボイラープレートをチェックしてみてください。これにより、グローバル名前空間を汚染することなくバックボーン アプリに適切なモジュール構造が追加され、シンプルなテンプレート キャッシュが提供されます。

テンプレート レンダラーを JST とは異なるものに変更するのは非常に簡単です。サーバー側の要件がなくても一般的な考え方に従うことができる場合でも、ボイラープレートは基本的な node.js アプリも提供します。

于 2012-01-29T00:25:37.167 に答える