1

Backbone index.html で複数の js ファイル宣言を回避するために、以前RequireJSは js ファイルをロードしていました。すべて正常に動作します。私のアプリケーションは次のようになります。

index.html

<body>
<div id="#plugin-container"></div>
<script data-main="my-plugin" src="assets/js/require.js"></script>   
</body>

my-plugin.js

define([
'src/app'
], function(app){
    app.init(); 
});

app.js

define([
'jquery',
'underscore',
'backbone',
'src/models/main'
], function($, _, Backbone, Main){

   var init = function () {....}
});

Everyting は正常に動作しますが、すべての html プロジェクト (プラグインのように) で使用できるプラグインにしたいと思いますjQuery。そして、私はどのように進めるかわかりません... 最良の最終的な使用法は次のようになります:

newproject.html

<div id="#plugin-container"></div>
<!-- Just load plugin. Do nothing. -->
<script data-main="my-plugin" src="assets/js/require.js"></script>
<script>
     // Just an example that I would do but is sure not working....
     myPlugin.init({
         param1: true,
         param2: '/url',
         onSubmitSomething : myMethod
     })
</script>
</body>

my-plugin.js

define([
'src/app'
], function(app){
    var myPlugin = app;
    return myPlugin;
});

私の質問：requirejs load（myPlugin）後にアプリケーションのインスタンスを取得し、htmlファイルでメソッドを起動する方法（上記のコードのように）？多分それは良い方法ではない... Thx。

アップデート

私は何かを試しました。my-plugin.js次のように、メイン アプリ モデルをウィンドウ オブジェクトに追加します。

// Loading main application file
define([
'src/app'
], function(app){

    global = window;
    global.myPlugin = app;

});

そしてmyPlugin.init()、htmlファイルmyPluginで起動しようとすると、再びアクセスできなくなります:

<script data-main="mvo-thumbnail-plugin" src="assets/js/require.js"></script>

<script>
    // Not working...
    myPlugin.init({
       "wrapper" : $("#thumbnailsManager"),
       "url_images" : "assets/",
    })
</script>

しかし、1 つの setTimeout を使用して requireJS の初期化を待機すると、正常に動作します。

<script data-main="mvo-thumbnail-plugin" src="assets/js/require.js"></script>

<script>
    // If I wait 500ms requireJS has done and my window.myPlugin 
    // object is available
    setTimeout(function(){
        myPlugin.init({
            "wrapper" : $("#thumbnailsManager"),
            "url_images" : "assets/"
        })
    },500)
</script>

それは私にとって本当の解決策ではありません。しかし、私はおそらく新しい反射の方法を持っています...

4

2 に答える 2

0

わかりました解決策を見つけました: RequireJS による自動メイン js 初期化を使用しません:

<script data-main="mvo-thumbnail-plugin" src="assets/js/require.js"></script>

に

<script src="assets/js/require.js"></script>
<script src="mvo-thumbnail-plugin.js"></script>

そして、メインのプラグイン ファイル ( mvo-thumbnail-plugin.js) で次のように require 関数を使用しました。

(function (global) {
   global.myPlugin = global.myPlugin || {};

   myPlugin.init = init;

   function init(arr) {

    // paths and dependencies list
       require.config({
         shim: {
            .....
         },
         paths: {
            .....
         }
       });

    // Main require function
       require([
                'jquery',
                'underscore',
                'backbone',
                'src/models/main'
               ], function($, _, Backbone, Main){

                    app = new Main(arr);

       });
  }

}(window));

次に、プラグインを初期化できます

<script>
  myPlugin.init({ .... });
</script>
于 2013-05-08T11:17:01.163 に答える
0

私は似たようなものに取り組んでいますが、より高度です。ただし、あなたのコードでは、どのような種類のプラグインを構築したり、別のアプリケーションに統合したりしたいのかが明確ではありません。

my-plugin.jsプロジェクトディレクトリにファイルを含めることをお勧めします。app.js次に、またはconfig.js使用しているメイン構成ファイルにファイルパスを含めます。含めるだけです。

作業する必要があるのは、カスタム モデルとそのビューを作成することだけです。コレクションとしてリモートサーバーからの値が必要な場合は注意してください（そうでない場合、コレクションは必要ありません）。次に、プラグインを実行する HTML のインスタンスを作成します。

<div>プラグインを含める対象のソースでメソッドを呼び出し、メソッドrenderを賢く使用してコードをフェッチします。

より多くのコードを指定できる場合は、それに応じてより多くのコードを提案できます。

于 2013-04-26T15:32:28.100 に答える