1

ねえ、私は RactiveJS を少し学んでいて、今のところ本当に気に入っています。私は RequireJS でそれを使用したいと思っていましたが、これを見つけました: https://github.com/Rich-Harris/Ractive/wiki/Using-Ractive-with-RequireJS

ただし、html テンプレートやそのコードの実装方法は表示されません。これは私が今まで持っている最高のものです：

(function () {
    requirejs.config({
        baseUrl: 'js',
    });

    require(['alerter', 'Ractive'], function (alerter, Ractive) {
        alerter.showMessage();

        Ractive = new Ractive({
            el: 'container',
            template: "{{greeting}} {{recipient}}!",
            data: {
                'greeting': alerter.showMessage(),
                'recipient': 'mike'
            }
        });
    });
})();

したがって、上記のコードは機能しますが、必要なコードのビットをテンプレートとして明示的に配置する必要があります。

上記のリンクにコードの実例はありますか? または、ractive で require を使用する方法を示す別の例ですが、テンプレート オブジェクトで口ひげをハードコーディングする必要はありません。

すべての助けに感謝します。

4

2 に答える 2

1

編集- サンプルの Ractive+RequireJS アプリケーションがhttps://github.com/RactiveJS/requirejs-ractive/tree/master/sampleにあります

Vanhelgen の答えは正しいです。テキスト プラグイン (ここからダウンロード) を使用するとrequire、.js ファイルの AMD モジュールだけでなく、任意のリソースを使用できます。これにより、テンプレートを別のファイルに保持できます。

したがって、wiki ページの 2 番目の例のブロックでは、templates/main.htmlファイルの内容が変数としてコード ブロックで使用できますmainTemplate。

さらに一歩進んで、Ractive ローダー プラグインをテキスト プラグインと一緒に使用すると、html ファイルの内容が Ractive のパーサーで事前に解析されます。(これは、アプリをデプロイする前にRequireJS オプティマイザーを使用してすべてを単一のファイルにバンドルしている場合にのみ、実行する価値があります。)

余談ですがRactive、デバッグが困難な状況を引き起こす可能性があるため、 のような変数を上書きしないことをお勧めします。規則では、インスタンスには小文字の変数名を使用するためractive = new Ractive(...)、Ractive = new Ractive(...).

于 2013-10-15T21:30:33.207 に答える