1

ええ、それはキャッシュがクリアされた後の最初のブラウザのロードです。その後の更新により、問題が解消されます。

最初の読み込み時にコレクション ビューで使用するのに間に合うようにアイテム ビューが完全に構築されていないと考えています。しかし、その後、彼らはリフレッシュしていますか？わからない。

コードシーケンス、読み込み、または読み込み時間自体に何かがあるに違いありません。わからない。私はrequire.js経由でロードしています。

ユーザーとメッセージの 2 つのコレクションがあります。それぞれが独自のコレクション ビューでレンダリングされます。それぞれが機能しますが、ブラウザが読み込まれるのは 1 回か 2 回だけではありません。

ブラウザのキャッシュをクリアした後に初めて読み込むと、コンソール レポートが次のように表示されます。

「Uncaught ReferenceError: MessageItemView が定義されていません」

ブラウザを更新するだけで問題は解決します。ユーザー コレクションについても同様です。コレクションビューは、アイテムビューについて何も知らないと言います。しかし、ブラウザを更新するだけで、すべて問題ありません。

私のビュー (アイテムとコレクション) は別のファイルにあります。それが問題ですか？たとえば、独自のファイル内のメッセージ コレクション ビューは次のとおりです。

messagelistview.js

    var MessageListView = Marionette.CollectionView.extend({
        itemView: MessageItemView,
        el: $("#messages")
    });

メッセージ項目ビューは別のファイルにあります。

messageview.js

    var MessageItemView = Marionette.ItemView.extend({
        tagName: "div",    
        template: Handlebars.compile(
                '<div>{{fromUserName}}:</div>' +
              '<div>{{message}}</div>' +
        )
    });

次に、これらの各ファイルを参照するメイン モジュール ファイルで、コレクション ビューを作成して表示します。

main.js

    //Define a model
    MessageModel = Backbone.Model.extend();

    //Make an instance of MessageItemView - code in separate file, messagelistview.js
    MessageView = new MessageItemView();


    //Define a message collection 
    var MessageCollection = Backbone.Collection.extend({
        model: MessageModel    
    });

    //Make an instance of MessageCollection
    var collMessages = new MessageCollection(); 


    //Make an instance of a MessageListView -  code in separate file, messagelistview.js
    var messageListView = new MessageListView({
        collection: collMessages
    });

    App.messageListRegion.show(messageListView);

順番が間違っているだけですか？3G から iPad への項目ビューが常に未定義であるため、ある種の競合状態であると考えています。それらは時間内に構築されることはないようです。ハードワイヤード接続の PC は、ブラウザーを 1 回または 2 回更新すると成功します。読み込み時間か、ブラウザの違いでしょうか。PC 上の Chrome IE と Firefox はすべて、更新時の動作に成功しているようです。iPad の Safari は常に失敗します。

以下のコメントごとに、ここに私のREQIREブロックがあります：ファイルapplication.js内

    require.config({
        paths: {
            jquery: '../../jquery-1.10.1.min',
            'jqueryui': '../../jquery-ui-1.10.3.min',
            'jqueryuilayout': '../../jquery.layout.min-1.30.79',
            underscore: '../../underscore',
            backbone: '../../backbone',
            marionette: '../../backbone.marionette',
            handlebars: '../../handlebars',
            "signalr": "../../jquery.signalR-1.1.3",
            "signalr.hubs": "/xyvidpro/signalr/hubs?",        
            "debug": '../../debug',
            "themeswitchertool": '../../themeswitchertool'
        },

        shim: {
            'jqueryui': {
                deps: ['jquery']
            },

            'jqueryuilayout': {
                deps: ['jquery', 'jqueryui']
            },

            underscore: {
                exports: '_'
            },

            backbone: {
                deps: ["underscore", "jquery"],
                exports: "Backbone"
            },

            marionette: {
                deps: ["backbone"],
                exports: "Marionette"
            },        

            "signalr": {
                deps: ["jquery"],
                exports: "SignalR"
            },

            "signalr.hubs": {
                deps: ["signalr"],
                exports: "SignalRHubs"
            },

            "debug": {
                deps: ["jquery"]
            },

            "themeswitchertool": {
                deps: ["jquery"]
            }
        }
    });


    require(["marionette", "jqueryui", "jqueryuilayout", "handlebars", "signalr.hubs", "debug", "themeswitchertool"], function (Marionette) {
        window.App = new Marionette.Application();

        //...more code

    })

最後に、使用するモジュール内で、問題のコレクション ビューを作成します。外部ファイルの依存関係のリストは次のとおりです。

    var dependencies = [
        "modules/chat/views/userview",
        "modules/chat/views/userlistview",
        "modules/chat/views/messageview",
        "modules/chat/views/messagelistview"
    ];

明らかに itemViews は collectionViews の前にリストされています。これは私には正しいようです。定義される前に itemViews を必要とする collectionViews の原因がわからない。そして、ブラウザの更新後にすべて問題ないのはなぜですか?

4

1 に答える 1

1

ファイルをロードする順序が間違っている可能性が高く、コレクション ビューの前にアイテム ビューをロードする必要があります。

すべてのコードを同じファイルに正しい順序で入れてみて、それが機能するかどうかを確認してください。

Marionette に関する私の本の無料プレビューでも、コレクション ビューを表示することができます。

校正に基づいて編集します。

モジュールにリストされている依存関係は、線形にロードされません。それこそが、RequireJS が回避するように設計されたものです。代わりに、ファイルを適切に (つまり、正しい順序で) ロードする方法は、RequireJS が計算してロードする依存関係の「チェーン」を定義することです。

あなたがする必要があるのは、（たとえば）userlistviewをuserviewに依存するように定義することです。このようにして、これらは RequireJS によって適切な順序で読み込まれます。ここで RequireJS アプリの例を見ることができます( RequireJS と Marionette に関する本から)。各モジュール定義がどのモジュールに依存するかを宣言する方法を見てください (したがって、RequireJS を事前にロードする必要があります)。繰り返しになりますが、依存関係配列内でモジュールを順番にリストしても、その順序でモジュールが読み込まれるわけではありません。実際には、依存関係チェーン メカニズムを使用する必要があります。

于 2013-10-25T06:42:46.137 に答える