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

我最后通過自己的電話從服務器端獲取文件。

在節點中（但這可以用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時會導致我出現問題。

Answer 2

我們曾經使用過knock的require.js，但我們已經開始使用browserify了。 從那以后，代碼庫更加出色，我們將整個項目構建到一個文件中，除了我們使用的基本庫。 （例如：knockout.js - 因為我們將它們與cdn分開加載，這使得應用程序在生產中更快，更快）

這是我們正在開發的組件庫： https ： //github.com/EDMdesigner/knobjs

我們使用gulp來構建項目。 檢查gulpfile中的build：dev任務。 基本上，模板將包含在內置的js文件中。