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

时间:2016-06-28 15:50:32

标签: 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' },
});

为此,我必须在我的项目中包含require.js并且需要文本`:

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

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

    });
</script>

2 个答案:

答案 0 :(得分:1)

我最后通过自己的电话从服务器端获取文件。

在节点中(但这可以用PHP或任何其他语言完成),我添加了一个路径来检索所请求的文件:

g++ -m64 -fPIC -O0 -g -D_DEBUG -D_GLIBCXX_DEBUG Test.cpp -o Test

然后我在Javascript端创建了我自己的自定义组件加载器,详细内容为in the docs

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

这样我就不必为这个简单的任务加载84Kb的require.js。 加上I'm not limited这种方式使用require.js,我可以使用单个组合和缩小的文件用于生产环境。

另外,我完全可以控制返回模板的缓存,这在使用require.js时会导致我出现问题。

答案 1 :(得分:0)

我们过去常常使用带有淘汰赛的require.js,但我们已经开始使用browserify了。从那以后,代码库更加出色,我们将整个项目构建到一个文件中,除了我们使用的基本库。 (例如:knockout.js - 因为我们将它们与cdn分开加载,这使得应用程序在生产中更快,更快)

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

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