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

Question

我想知道是否有另一种方法可以在 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>

Answer 1

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

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

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

Answer 2

我最终通过自己的调用从服务器端获取了文件。

在节点中（但这也可以用 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。加上这种使用 require.js 的方式，我可以在生产环境中使用单个合并和缩小的文件。

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

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

knockout.js external templates without require.js

javascript

knockout.js

knockout-3.2