Внешние шаблоны Knockout.js без require.js

Мне интересно, есть ли другой способ использования шаблонов в Knockout.js без использования require.js для их динамической загрузки.

Он добавляет около 20 КБ после минификации на сайт, и кажется, что мы загружаем довольно большую библиотеку, чтобы сделать что-то, для чего, вероятно, не потребуется столько кода.

Вот что я делаю сейчас:

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>

javascript knockout.js knockout-3.2
person Alvaro    schedule 28.06.2016    source источник
comment
Вы проверили эту страницу документации? knockoutjs.com/documentation/ Мне кажется, что вы придется реализовать метод loadTemplate для получения html с сервера...   -  person user3297291    schedule 28.06.2016
comment
Вот статья, которую я написал некоторое время назад с некоторыми вариантами: safaribooksonline.com/blog/2014/01/31/. Использование механизма шаблонов на основе строк с шагом сборки для объединения ваших шаблонов — это возможный вариант, который я использовал в прошлом.   -  person RP Niemeyer    schedule 28.06.2016

Ответы (2)


arrow_upward
1
arrow_downward

Я закончил тем, что получил файл со стороны сервера с моим собственным вызовом.

В узле (но это можно сделать и на 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);

Таким образом я избавил себя от необходимости загружать 84 КБ require.js для этой простой задачи. Кроме того, я не ограничен этим способом использования require.js, и я могу использовать один комбинированный и минимизированный файл для производственные среды.

Кроме того, я полностью контролирую кэширование возвращаемых шаблонов, что раньше вызывало у меня проблемы при использовании require.js.

person Alvaro    schedule 28.09.2016

arrow_upward
-1
arrow_downward

Раньше мы использовали require.js с нокаутом, но вместо этого начали использовать браузер. С тех пор кодовая база намного лучше, и мы собираем весь проект в один файл, за исключением основных библиотек, которые мы используем. (Например: Knockout.js — потому что мы загружаем их отдельно от cdn, что значительно ускоряет работу приложения)

Вот библиотека компонентов, которую мы разрабатываем: https://github.com/EDMdesigner/knobjs

Мы используем gulp для сборки проекта. Проверьте задачу build:dev в gulpfile. По сути, шаблоны будут включены в созданный файл js.

person gyula.nemeth    schedule 28.06.2016