1

私の知る限り、Backbone.jsビューはDOM要素を表しています。既存のDOMから取得するか、オンザフライインel属性で作成します。

私の場合、Djangoテンプレートを使用していて、すべてをJavaScriptテンプレートに書き直したくないので、AJAXリクエストでサーバーから取得したいと思います。

そこでel、AJAXリクエストを実行する関数を定義します。

el: function() {
    model.fetch().success(function(response) {
        return response.template
    })
}

もちろん、AJAXリクエストは非同期で実行されるため、機能しません。

これは、私にはel属性がなくevents、どちらも機能しないことを意味します。修正できますか？

たぶん、Backbone.jsフレームワークは私のニーズに適したツールではありませんか？私がそれを使いたい理由は、コードの構造を持つためでした。

PS私はBackbone.jsを初めて使用します。

4

2 に答える 2

2

別のビューから ajax リクエストを実行するか、jquery を直接使用してページをロードした直後に、テンプレートをダウンロードした後、バックボーン ビュー クラスを適切な id/el などでインスタンス化します (取得した ajax を保存した場所に応じて)テンプレート）。ユースケースによっては、これが賢明なアプローチである場合とそうでない場合があります。

別の、おそらくより典型的なアプローチは、プレースホルダー要素 (「読み込み」など) を使用してビューを設定し、ajax を起動し、更新されたテンプレートが取得された後、それに応じてビューを更新することです (要求した実際のテンプレートのプレースホルダー)。

ビューを新しい/他の DOM 要素で更新する場合は、ビューのdelegateEventsメソッドを呼び出して、イベントを新しい要素に再バインドする必要があります。次を参照してください。

http://backbonejs.org/#View-delegateEvents

于 2013-02-22T15:50:15.263 に答える
2

同様の要件に遭遇しました。私の例では、asp.net を実行していて、ユーザー コントロールからテンプレートを取得したいと考えていました。最初にお勧めするのは、マリオネットを調べることです。なぜなら、バックボーンで定型コードをたくさん書く必要がなくなるからです。次のステップは、テンプレートのロード方法をオーバーライドすることです。この場合、Ajax を使用してサーバーから HTML を取得する関数を作成しました。この関数を使用して HTML ページをプルダウンする例を見つけたので、MVC タイプのリクエストを作成できるように少し変更しました。どこからアイデアを見つけたのか思い出せません。それ以外の場合は、ここにリンクを提供します。

function JackTemplateLoader(params) {
    if (typeof params === 'undefined') params = {};
    var TEMPLATE_DIR = params.dir || '';

    var file_cache = {};

    function get_filename(name) {
        if (name.indexOf('-') > -1) name = name.substring(0, name.indexOf('-'));
        return TEMPLATE_DIR + name;
    }

    this.get_template = function (name) {
        var template;
        var file = get_filename(name);
        var file_content;
        var result;
        if (!(file_content = file_cache[name])) {
            $.ajax({
                url: file,
                async: false,
                success: function (data) {
                    file_content = data; // wrap top-level templates for selection
                    file_cache[name] = file_content;
                }
            });
        }
        //return file_content.find('#' + name).html();
        return file_content;
    }

    this.clear_cache = function () {
        template_cache = {};
    };

}

3 番目のステップは、Marionette のメソッドをオーバーライドしてテンプレートをロードすることです。app.addInitializer メソッドでこれを行いました。ここでは、テンプレート ローダーを初期化し、そのディレクトリをルート ハンドラーに設定しています。したがって、テンプレートをロードしたいときは、ビューにテンプレート「テンプレート名」を設定するだけで、Backbone は api/ApplicationScreens/templatename からテンプレートをロードします。ASP.net は <%= %> 構文に感銘を受けていないため、Handlebars を使用するようにテンプレートのコンパイルもオーバーライドしています。 

    app.JackTemplateLoader = new JackTemplateLoader({ dir: "/api/ApplicationScreens/", ext: '' });
    Backbone.Marionette.TemplateCache.prototype.loadTemplate = function (name) {
        if (name == undefined) {
            return "";
        } else {
            var template = app.JackTemplateLoader.get_template(name);
            return template;
        }
    };
    // compiling
    Backbone.Marionette.TemplateCache.prototype.compileTemplate = function (rawTemplate) {
        var compiled = Handlebars.compile(rawTemplate);
        return compiled;
    };
    // rendering
    Backbone.Marionette.Renderer.render = function (template, data) {
        var template = Marionette.TemplateCache.get(template);
        return template(data);
    }

うまくいけば、これが役に立ちます。私は大規模な動的 Web サイトに取り組んできましたが、非常に順調に進んでいます。Marionette と Backbone.js を使用する全体的な機能とフローには、常に驚かされます。

于 2013-03-08T13:20:07.580 に答える