Пример Ractive с требованием

Привет, я немного изучаю RactiveJS, и пока он мне очень нравится. Я хотел использовать его с RequireJS и нашел это: https://github.com/Rich-Harris/Ractive/wiki/Using-Ractive-with-RequireJS

однако он не показывает шаблон html или то, как реализован какой-либо из этого кода. Это лучшее, что у меня есть:

(function () {
    requirejs.config({
        baseUrl: 'js',
    });

    require(['alerter', 'Ractive'], function (alerter, Ractive) {
        alerter.showMessage();

        Ractive = new Ractive({
            el: 'container',
            template: "{{greeting}} {{recipient}}!",
            data: {
                'greeting': alerter.showMessage(),
                'recipient': 'mike'
            }
        });
    });
})();

поэтому приведенный выше код работает, но вы должны явно указать в качестве шаблона, какие биты кода вы хотите.

Есть ли рабочий пример кода по ссылке выше? или другой пример, который показывает, как использовать require с ractive, но не нужно жестко кодировать усы в объекте шаблона.

Спасибо за любую помощь.


javascript html requirejs ractivejs
person tomo    schedule 15.10.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

с require.js вы можете загружать текстовый контент с помощью «текстового» плагина со страницы проекта:

require(['text!path/to/your/template.txt'], function (tmpl) {
    ...
    Ractive = new Ractive({
        el: 'container',
        template: tmpl,
        data: {
            'greeting': alerter.showMessage(),
            'recipient': 'mike'
        }
    });
});

Надеюсь это поможет. Удачи

person mfeineis    schedule 15.10.2013

arrow_upward
1
arrow_downward

изменить — теперь образец приложения Ractive+RequireJS доступен по адресу https://github.com/RactiveJS/requirejs-ractive/tree/master/sample

Ответ Ванхельгена правильный — текстовый плагин (скачать отсюда) позволяет require использовать любой ресурс, а не только AMD модули в файлах .js, что позволяет хранить ваши шаблоны в отдельном файле.

Таким образом, во втором примере блока вики-страницы содержимое файла templates/main.html доступно блоку кода как переменная mainTemplate.

Сделав еще один шаг вперед, вы можете использовать плагин загрузчика Ractive вместе с текстовым плагином. , а содержимое html-файла будет подготовлено парсером Ractive. (Это действительно стоит делать, только если вы используете оптимизатор RequireJS, чтобы объединить все в один перед развертыванием приложения.)

Кроме того, лучше не перезаписывать такие переменные, как Ractive, так как это может привести к трудным для отладки ситуациям. Соглашение состоит в том, чтобы использовать имена переменных в нижнем регистре для экземпляров, поэтому ractive = new Ractive(...), а не Ractive = new Ractive(...).

person Rich Harris    schedule 15.10.2013