3

require.jsテンプレートを動的にロードする必要なく、knockout.js でテンプレートを使用する別の方法があるかどうか疑問に思っています。

縮小後、約 20Kb がサイトに追加されます。かなり大きなライブラリをロードして、背後にある多くのコードを必要としないようなことを行っているようです。

これは私が今していることです：

ko.components.register('menu', {
    viewModel: { instance: mm.viewModel },
    template: { require: 'text!views/menu.html' },
});

そのためにはrequire.js、プロジェクトに含めて、テキストを要求する必要がありました`:

<script type="text/javascript">
    requirejs.config({
        paths: {
            text: 'bower_components/text/text'
        },

        urlArgs: "v=" + new Date().valueOf()

    });
</script>
4

2 に答える 2

1

私は自分の呼び出しでサーバー側からファイルを取得することになりました。

ノードで (ただし、これは PHP または他の言語でも実行できます)、要求されたファイルを取得するためのルートを追加しました。

router.get('/loadFile/', function(req, res, next){
    var params = req.query;
    var demo = express.static(path.join(res.locals.virtualDirPath, 'public'));

    fs.readFile( __dirname + '/../public/elements/' + params.filename, "utf-8", function read(err, data) {
        if (err) {
            throw err;
        }

        // Invoke the next step here however you like
        return res.send(data);

        processFile(); 
    });
});

次に、 docs で詳しく説明されているように、Javascript 側で独自のカスタム コンポーネント ローダーを作成しました。

var templateFromUrlLoader = {
    loadTemplate: function(name, templateConfig, callback) {
        var newUrl = url + 'others/loadFile/';
        var params = { 'filename' : templateConfig.filename };

        if (templateConfig.filename) {
            // Uses jQuery's ajax facility to load the markup from a file
            $.get(newUrl, params, function(markupString) {
                // We need an array of DOM nodes, not a string.
                // We can use the default loader to convert to the
                // required format.
                ko.components.defaultLoader.loadTemplate(name, markupString, callback);
            });
        } else {
            // Unrecognized config format. Let another loader handle it.
            callback(null);
        }
    }
};

// Registering it
ko.components.loaders.unshift(templateFromUrlLoader);

このようにして、この単純なタスクのために 84Kb の require.js をロードする必要がなくなりました。さらに、この方法は require.js の使用に限定されず、本番環境用に結合され縮小された単一のファイルを使用できます。

また、require.js の使用時に問題を引き起こしていた、返されたテンプレートのキャッシュを完全に制御できます。

于 2016-09-28T08:55:59.707 に答える
-1

以前はノックアウトで require.js を使用していましたが、代わりに browserify を使用するようになりました。それ以来、コード ベースはより良くなり、使用する基本的なライブラリを除いて、プロジェクト全体を 1 つのファイルにビルドします。(例: knockout.js - cdn とは別にロードするため、実稼働中のアプリがはるかに高速になります)

これが私たちが開発しているコンポーネント ライブラリです: https://github.com/EDMdesigner/knobjs

プロジェクトのビルドには gulp を使用します。gulpfile の build:dev タスクを確認します。基本的に、テンプレートはビルドされた js ファイルに含まれます。

于 2016-06-28T20:09:08.770 に答える