javascript - 没有 require.js 的 knockout.js 外部模板

Question

我想知道是否有另一种方法可以在 knockout.js 中使用模板，而不必使用 require.js 来动态加载它们。

它在网站缩小后增加了大约 20Kb，看起来我们正在加载一个相当大的库来做一些可能不需要那么多代码的事情。

这就是我现在正在做的:

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

为此，我必须在我的项目中包含 require.js 和 requrie text`:

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

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

    });
</script>

Answer 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(); 
    });
});

然后我在 Javascript 端创建了自己的自定义组件加载器，详见 in the docs .

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。加上 I'm not limited这样就可以使用 require.js，我可以在生产环境中使用一个合并的缩小文件。

此外，我可以完全控制返回模板的缓存，这曾经在使用 require.js 时给我带来问题。