backbone.js - Require.js モジュールが Backbone Router.js を認識しない

Question

この単純な Require/Backbone アプリで

https://github.com/thisishardcoded/require-prob

app.js は Router を認識しますが、TestView.js は認識しないのはなぜですか?

これがapp.jsの最初の行です

define(['router'],function (Router) {

これがTestView.jsの最初の行です

define(['backbone','router'],function(Backbone,Router){

詳細についてはレポをチェックしてください。気になる場合は、コンソールログをダウンロードして実行し、確認してください。

ありがとう！ジム

詳細: わかりました、答えは - ロードされる順序が原因で、それが変更されたとしても、循環依存関係がありますよね? TestView には Router が必要で、Router には TestView が必要です。

その場合、解決策は

var r=require('router);
r.navigate or whatever

しかし、ルーターがどこからでも直接アクセスできないのは残念なことのように思えますが、上記の方法はとにかく良い方法ですか?

score 5 · Accepted Answer

確かにそれは循環依存のために起こります。これを解決するには、ビューのコンストラクターにルーターを渡し、ビューのモジュールからルーターの依存関係を削除するか、ビューで require('router') を使用します。

最初のオプション、router.js:

app_router.on('route:test', function () {
    var testView = new TestView({router: app_router});
    testView.render();
})

最初のオプション、view.js:

define(['backbone'], function(Backbone){

    var TestView=Backbone.View.extend({
        el: '#test',
        initialize: function() {
            // get router from constructior options
            this.router = this.options.router
        },
        render: function(){
            this.$el.html('<p>Foo!</p>');
            console.log("TestView.js does not find 'Router',", this.router);
        }
    });

    return TestView;

});

2 番目のオプション、view.js:

define(['backbone','router'], function(Backbone, router){

    // at this point router module is not loaded yet so router is undefined

    var TestView=Backbone.View.extend({
        el: '#test',
        initialize: function() {
            // at this point router module is loaded and you may access it with require call
            this.router = require('router');
        },
        render: function(){
            this.$el.html('<p>Foo!</p>');
            console.log("TestView.js does not find 'Router',", this.router);
        }
    });

    return TestView;

});

2番目のオプションもここで説明されています: http://requirejs.org/docs/api.html#circular

score 0 · Accepted Answer

は単純なラッパーであるため、 availableBackbone.history.navigateを使用して目標を簡単に達成できます。バックボーンソースのこの部分をRouter.navigate検討してください。

navigate: function(fragment, options) {
  Backbone.history.navigate(fragment, options);
  return this;
},

score 0 · Accepted Answer

あなたのコードをダウンロードして調べました。次のような問題が考えられます。

require.jsでのみ動作しAMDsます。バックボーンはもはやサポートしていないのでAMD。AMDの有効なバージョンを使用する必要がありますBackbone。ここで入手できます
TestView は Router の依存関係です。したがって、ルーターがロードされる前にロードされます。

コーディングパターンを改善したい場合があります。これが私の提案です：

App.js

define([

'backbone', 'router', ], function(Backbone, MainRouter){ 'use strict';

var AppView = Backbone.View.extend({

    initialize: function(){

        App.router = new MainRouter();
        Backbone.history.start();
    }
});

return AppView;
});

Router.js

define([
  'backbone',
  'view/TestView'
], function(Backbone, TestView){
    var Main = Backbone.Router.extend({
        routes: {
            'test': 'test'
        },

        test: function(){
            new TestView({
                // pass model or collection to the view
                // model: new TestModel // remember to require
            });
        }

    });

    return Main;
});

編集イベントを聞く：

// in main.js
var window.Vent = {};

_.extend(window.Vent, Backbone.Events);

// now in any view you can trigger a event
$('something').on('click', function(){
    window.Vent.trigger('somethinghappened', this); 
    // this is reference to current object
});

// now in other view you can do
window.Vent.on('somethinghappened', this.run, this); 
// this in the end is the reference we passed when event was triggered

run: function(obj){
    //this function will run when the event is triggered
    // obj is the object who triggered the event
}

PS: なぜビューでルーターを使用したいのですか?? 私はかなりの数のバックボーンアプリを構築しました。そうする必要はありませんでした。

backbone.js - Require.js モジュールが Backbone Router.js を認識しない

4 に答える 4

Related

Reference