2

65 以上の html ページと中央の JavaScript ライブラリのマルチページ アプリをクリーンアップしています。私の HTML ページには大量の冗長性があり、中央の js ライブラリはスパゲッティになっています。特定の構造を強制するより大きなフレームワーク内で作業しているため、ページの統合に制限があります。冗長性を減らし、コードをクリーンアップしたい。

バックボーン、MVC パターン、マイクロテンプレート、requirejs を発見しましたが、これらはシングル ページ アプリケーションに最適なようです。どういうわけか、どのページがロードされているかをメインモジュールに知らせて、ページに正しい要素を配置する必要があります。ページ要素の正しいコレクションを取得し、オブジェクトとして App.initialize に渡す html のタイトルを渡すことを考えています。

1) 誰でもこのアプローチを検証できますか? そうでない場合、推奨される代替アプローチはありますか? 操り人形のような骨格への拡張はどうですか？

2) ページの詳細をバックボーン フレームワークに取り込む手段を推奨できる人はいますか?

バックボーンのチュートリアルに従って、view.render メソッドを呼び出す App.initialize メソッドを呼び出す main.js を使用して、成功したテスト ページを作成しました。私が最初に考えたのは、html ページのタイトルを読み取り、それを使用して、読み込まれている特定のページのモデルを選択することです。各ページ レイアウトの詳細を含むオブジェクトを渡す必要があります。ビューの render メソッドを次に示します。これにより、私が何をしようとしているのかがわかります。

            render: function () {  // pass parameter to render function here?
            var data = new InputModel,
                pageTitle = data.pageTitle || data.defaults.pageTitle,
                compiled,
                template;

            var pageElements = [
                { container: '#page_title_container', template: '#input_title_template' },
                { container: '#behavior_controls_container', template: '#behavior_controls_template' },
                { container: '#occurred_date_time_container', template: '#date_time_template' }]

            for (var i = 0; i < pageElements.length; i++) {
                this.el = pageElements[i].container;
                compiled = _.template($(InputPageTemplates).filter(pageElements[i].template).html());
                template = compiled({ pageTitle: pageTitle });  
                //pass in object with values for the template and plug in here?
                $(this.el).html(template);
            }
        }

どうぞよろしくお願いいたします。1999 年頃の JavaScript スキルを更新するのがとても楽しいです。この言語では、たくさんのクールなことが起こっています。

4

1 に答える 1

1

ドキュメントのタイトルを使用してロードされたスクリプトを選択するのは、少し面倒に聞こえます。ただし、うまくいく場合は、それを試してください。

検討する価値のあるもう 1 つのアイデアは、Backbone.RouterをpushState:true使用して正しいページをセットアップすることです。起動時に呼び出すとBackbone.history.start()、ルーターは現在の URL、つまり現在のページに一致するルートにヒットします。

ルート コールバックでは、すべてのページ固有の初期化を行うことができます。

initialize()テンプレートとコンテナーの選択をビューからルーターに移動し、関数 (ビューのコンストラクター) でビューを設定できます。次のように言います。

//view
var PageView = Backbone.View.extend({
    initialize: function(options) {
        this.model = options.model;
        this.el = options.el;
        this.title = options.title;
        this.template = _.template($(options.containerSelector));
    },

    render: function() { 
        window.document.title = title;
        var html = this.template(this.model.toJSON());
        this.$el.html(html);
    }
});

ルーター レベルでビューの選択を処理します。

//router
var PageRouter = Backbone.Router.extend({
    routes: {
        "some/url/:id": "somePage",
        "other/url":    "otherPage"
    },

    _createView: function(model, title, container, template) { 
        var view = new PageView({
            model:model,
            title:title
            el:container,
            templateSelector:template,
        });
        view.render();
    },

    somePage: function(id) { 

        var model = new SomeModel({id:id});
        this._createView(model, "Some page", "#somecontainer", "#sometemplate");
    },

    otherPage: function() {
        var model = new OtherModel();
        this._createView(model, "Other page", "#othercontainer", "#othertemplate");
    }
});

そして、を使用してアプリケーションを開始しますBackbone.history.start()

//start app
$(function() {
    var router = new PageRouter();
    Backbone.history.start({pushState:true});
}

このタイプのソリューションでは、ビュー コードは他のビュー固有のコードを知る必要がなく、一部のページに特化したビュー クラスを作成する必要がある場合でも、元のコードを変更する必要はありません。

一見すると、これはクリーンなソリューションのように見えます。もちろん、ルーターがルートのキャッチを開始したい場合にいくつかの問題が発生する可能性があり、ブラウザーがページから通常どおりに移動できるようにする必要があります。これが深刻な問題を引き起こしたり、タイトルベースのソリューションよりもさらに大きな混乱につながる場合は、元のソリューションが依然として望ましいかもしれません.

(テストされていないコード例)

于 2012-12-10T21:06:19.817 に答える