4

ですから、誰かが私のデザインに従ってパターンを構築するのは難しいかもしれないことを認めます。しかし、私は問題を説明するために最善を尽くしますが、これは私のプロジェクトを理解してもらうよりも簡単かもしれません:)しかし、私はこれを理解しようとして3日を費やしました.

テクニカルレイアウトのまとめ

  • 私はグローバル ビューを持っています (グローバル ビューの場合は this と呼びましょGVう)、すべてがこのテンプレートを通過します。
  • ナビゲーションがあります。クリックすると、5 つの個別のビューのいずれかを呼び出すことができます。
  • これらの各ビューは、最初に同じビュー ( DVdefaultView の場合) を使用し、次にこのビューを拡張して独自のビューJST(OwnView の OV)から詳細をロードします。
  • 問題は、クリックして OV をロードするときに、ロードするelementようにバインドされている ( target) がまだページにレンダリングされていないことです。ただし、 で使用でき、DOM実際には を更新しDVますOVが、ページにはレンダリングしません。

簡単な概要 - ビューがどのように設定され、何が拡張されているかを理解する

  1. GV - 読み込み: ログイン、ホーム、グローバル ナビゲーション
  2. DV - 負荷: このセクションのナビゲーション。
    • DV は GV を拡張します。SD.defaultView.extend
  3. OV - 負荷: h2、オプションとボタンのアイコン
    • 各 OV は DV を拡張するので、すべてのクリック イベントを 1 つのビューに保持でき、コードを全体に貼り付ける必要はありません。SD.defaultSexView.extend

問題

OV内にある要素に読み込まれますDV。すべてが完全に読み込まGVれます。DVからクリックするlogin -> home -> navigation -> throughと、DV. ここで相互作用が崩壊します。ロードされるのは for の中にあったものだけJSTですDV

建てる

背景情報を提供するだけです：

  • を使用してJST、すべてのテンプレートをプリコンパイルしています。
  • main.jsrequire を介してすべての依存関係をロードします。私のルートも処理します
  • sdFunctions.jsグローバルやその他の重要なものがあります。しかし、最も重要なのは 2 つのグローバル デフォルト ビューです。
    • 1:GVすべてが最初に通過する
    • 2:DVすべてのオプションが通過する (メインのナビゲーション メニュー)

概要

OVロードするには、ロード先の要素が利用可能でなければならないことを知っています。これはel: 'sexdetails'。この要素は からロードされますDV。したがって、ロードDVするにはDOMにある必要があることに気づきました。OVそれ以外の場合は、ロードする要素がありません。ここに画像の説明を入力

これはコンソール ロードです。pageは からGV sexdetailsロードされ、DVこれはOVがロードされる場所です。これらのコンソールはすべてロード順に出力されます。というわけで上から下へ。

一番下は最後のconsole.logに見られるようで、elementすべて正しい情報で構築されているためグレー表示されています。しかし、何らかの理由でページに出力されません。

JS

今、エキサイティングな部分:p

DV - これは 2 番目の defaultView で、メニューを処理し、クリック イベントがバインドされる場所です。

SD.defaultSexView = function(){
    //set up homeview
    var sexView = SD.defaultView.extend({
        el: 'page',
        jstemplate: JST['app/www/js/templates/sex/sexTemplate.ejs'],
        events:{
            "click sexoptions > *" : 'changeSex'
        },
        changeSex: function(elem){

            var me = elem.currentTarget.localName;

            $('.selected').removeClass('selected');// #update selected from bottom navigation
            $(me).addClass('selected');

            SD.pageLoad(elem); // #Call function that will re-render the page
        },
        render: function () {
            var compiled = this.jstemplate();
            this.$el.html(compiled);
        }
    });
    SD.DSV = new sexView();
    SD.DSV.render();
    return sexView;
}();

自分のビュー - 5 つのファイルのそれぞれに、これらのいずれかがあります。

//set up homeview
var wank = SD.defaultSexView.extend({
    el: 'sexdetails',
    jstemplate: JST['app/www/js/templates/sex.ejs'],
    data: {
        url: SD.HTTP+'stats/add',
        sextype: 'wank',
        header: 'SOME LOUD STRING!!!',
        image: '/img/path.jpg'
    },
    render: function () {
        c($('sexdetails'));
        c(this.$el);
        var compiled = this.jstemplate(this.data);
        this.$el.html(compiled);
    }
});
return wank;

完全に機能するすべてのコードは、http: //m.sexdiaries.co.uk/にあります。URL に惑わされないでください。SFW であることを保証します。すべてが漫画で行われ、大雑把ではありません。

興味深いことに、使用するコードを更新する$('sexdetails').html(compiled);と、実際には正しく表示されますが、どのイベントも正しくバインドされません。

申し訳ありませんが、取り入れるべきことがたくさんあります.

4

2 に答える 2

1

あなたのコードを見た後、私はあなたの "Wank" ビューで、あなたが に設定elしていることに気付きましたsexdetails。これがなぜなのかの詳細を掘り下げることはできませんでしたが、DOM の特異性の欠如と関係があると思います。

ただし、「本文コンテンツ ページ」に設定elすると、ページの本文に直接フックして表示することができ、render関数が残りの作業を実行できるため、問題なく表示してレンダリングできます。

お役に立てれば！

于 2013-10-25T16:53:19.657 に答える