Асинхронная загрузка данных в Ractive.js

Мне нравится извлекать некоторые удаленные данные при рендеринге шаблона ractive. Из-за асинхронного характера запроса никакие данные не выводятся. Как я могу это сделать?

 var ractive = new Ractive({
    debug: true,
        el: 'container',
        template: '#template',
        data: 
        {   
            chapters:chapters,
                    load_text: function(path)
                    {
                         $.get(path, function( text ) {                            
                             return text;
                          });
                    }                    
        }
 });

javascript ractivejs
person Stan Wiechers    schedule 25.04.2014    source источник

Ответы (2)


arrow_upward
13
arrow_downward

На ум приходит несколько решений;

Создайте объект Ractive, сделайте запрос, а затем вызовите set для объекта ractive, когда у вас есть данные.

var ractive = new Ractive({
    debug: true,
    el: 'container',
    template: '#template',
    data: {
        chapters: chapters,
        load_text: ''
    }
});

$.get(path, function( text ) {
    ractive.set('load_text', text);
});

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

var ractive = new Ractive({
    debug: true,
    el: 'container',
    template: '#template',
    data: {
        chapters: chapters,
        load_text: function(path) {
            $.ajax({
                url: path,
                success : function (text) {
                    return text;
                },
                async : false
            });
        }
    }
});
person Michael Camden    schedule 27.04.2014
comment
Именно так мы загружаем данные с нашими R-компонентами в продакшене. - person Teo Choong Ping; 19.01.2015
comment
@TeoChoongPing, у вас есть полный пример? У меня много плагинов jquery на странице и возникают проблемы при вызове кода (в каком порядке) - person nhaberl; 17.05.2019

arrow_upward
0
arrow_downward

Причина, по которой ваш вызов $.get не возвращает никаких значений, заключается в том, что функция, которую вы передаете, является обратным вызовом (функция, переданная в качестве параметра другой функции, которая должна выполняться после завершения первой функции без блокировки).

Фактическая функция $.get ничего не возвращает. Причина, по которой вы передаете ему обратный вызов, заключается в том, что после завершения работы он может вызвать этот обратный вызов (с результатом $.get в качестве параметра). Кроме того, если вы не вызываете ractive.data.load_text() где-то в своем приложении, функция, которую вы назначили load_text, никогда не запустится.

Что меня беспокоит, так это то, что код, который вы разместили, демонстрирует фундаментальное непонимание того, как работает Javascript (и, в частности, асинхронные операции в Javascript). Я рекомендую немного почитать об обратных вызовах (я разместил некоторые ресурсы ниже). Удачи!

javascriptissexy.com/понимание-javascript-обратный вызов-функции-и-использование-их/

recurial.com/programming/understanding-callback-functions-in-javascript/

Кроме того, когда вы будете готовы отказаться от обратных вызовов, вот статья об обещаниях в jQuery: http://code.tutsplus.com/tutorials/wrangle-async-tasks-with-jquery-promises--net-24135

person Duncan Smith    schedule 13.05.2014
comment
Благодарность! Я понимаю js и просто искал способ заставить его работать с ractive. - person Stan Wiechers; 14.05.2014