3

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

它在向站点进一步缩小后增加了大约 20Kb，似乎我们正在加载一个相当大的库来做一些可能不需要太多代码的事情。

这就是我现在正在做的事情：

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

为此，我必须require.js在我的项目中包含并要求 text`：

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

然后我在 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 来代替。从那时起，代码库变得更好，我们将整个项目构建到一个文件中，除了我们使用的基本库。（例如：knockout.js - 因为我们将它们与 cdn 分开加载，这使得应用程序在生产中的速度要快得多）

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

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

于 2016-06-28T20:09:08.770 回答