没有 require.js 的 knockout.js 外部模板答案

【问题标题】：knockout.js external templates without require.js没有 require.js 的 knockout.js 外部模板
【发布时间】：2017-02-11 23:30:14
【问题描述】：

我想知道是否有另一种方法可以在 knockout.js 中使用模板，而不必使用 require.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>

【问题讨论】：

您查看过此文档页面吗？ knockoutjs.com/documentation/… 在我看来，您必须实现 loadTemplate 方法才能从服务器获取 html...
这是我不久前写的一篇文章，带有一些选项：safaribooksonline.com/blog/2014/01/31/…。使用带有构建步骤的基于字符串的模板引擎来捆绑模板是我过去使用过的一个可能选项。

标签： javascript knockout.js knockout-3.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(); 
    });
});

然后我在 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 时曾经给我带来问题。

【讨论】：

【解决方案2】：

我们曾经使用带有knockout的require.js，但我们已经开始使用browserify来代替。从那时起，代码库变得更好，我们将整个项目构建到一个文件中，除了我们使用的基本库。（例如：knockout.js - 因为我们将它们与 cdn 分开加载，这使得应用程序在生产中的速度大大加快）

这是我们正在开发的组件库： https://github.com/EDMdesigner/knobjs

我们使用 gulp 来构建项目。检查 gulpfile 中的 build:dev 任务。基本上，模板将包含在构建的 js 文件中。

【讨论】：