Javascript 不带require.js的knockout.js外部模板

Javascript 不带require.js的knockout.js外部模板,javascript,knockout.js,knockout-3.2,Javascript,Knockout.js,Knockout 3.2,我想知道是否有另一种方法可以在knockout.js中使用模板,而不必使用require.js动态加载模板 在网站缩小后,它增加了大约20Kb,而且我们似乎正在加载一个相当大的库来做一些可能不需要太多代码的事情 这就是我现在正在做的: ko.components.register('menu', { viewModel: { instance: mm.viewModel }, template: { require: 'text!views/menu.html' }, });

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

在网站缩小后,它增加了大约20Kb,而且我们似乎正在加载一个相当大的库来做一些可能不需要太多代码的事情

这就是我现在正在做的:

ko.components.register('menu', {
    viewModel: { instance: mm.viewModel },
    template: { require: 'text!views/menu.html' },
});
为此,我必须在我的项目和require文本中包含
require.js

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

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

    });
</script>

requirejs.config({
路径:{
text:'bower_组件/text/text'
},
urlArgs:“v=“+new Date().valueOf())
});

我们过去在knockout中使用require.js,但现在开始使用browserify。从那时起,代码库就更好了,我们将整个项目构建到一个文件中,除了我们使用的基本库之外。(例如:knockout.js-因为我们分别从cdn加载它们,这使得应用程序的生产速度大大加快)

下面是我们正在开发的组件库:


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

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

在node中(但这也可以用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端创建了自己的自定义组件加载程序

这样我就不用为这个简单的任务加载84Kb的require.js了。 再加上require.js的使用,我可以在生产环境中使用单一的组合和缩小文件


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

您是否查看了此文档页面?在我看来,您必须实现
loadTemplate
方法才能从服务器获取html…这是我不久前写的一篇文章,其中包含一些选项:。在构建步骤中使用基于字符串的模板引擎捆绑模板是我过去使用过的一个可能选项。
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);