Return operation $ .get returning undefined

Navigation
0

I have this component using Ractive , but I have encountered a problem I am trying to perform an AJAX request using zeptos , in console.log(data) in> array of objects normally, but in return it returns undefined . What could be happening? 

 //Template Events List

    <script id="eventlist" type="text/ractive">
        <h4><i class="fa fa-globe"></i> {{title}}</h4>
        <hr>
        <table class="w3-table w3-bordered w3-small">
            <thead>
                    <th>Titulo</th>
                    <th>Data</th>
                    <th>Autor</th>
                    <th>Ações</th>
            </thead>
            <tbody>
            {{#if events}}
                {{#events}}
                <tr>
                    <td>{{title}}</td>
                    <td>{{date}}</td>
                    <td>{{author}}</td> 
                    <td>
                        <a href="#/delete/{{id}}" class="w3-button w3-red">Excluir</a>
                        <a href="#/view/{{id}}" on-click="@.viewEvent(id)" class="w3-button w3-light-grey">Ver</a>              
                    </td>                           
                </tr>
                {{/events}}
                {{else}}
                <tr>
                    <td class="w3-center" colspan="5">Não há dados para ser exibido.</td>
                <tr>                        
                {{/if}}
            </tbody>
        </table>    
        <!-- The Modal -->
        <div id="id01" class="w3-modal">
            <div class="w3-modal-content">
                <div class="w3-container">

                <span onclick="document.getElementById('id01').style.display='none'" 
                class="w3-button w3-display-topright">&times;</span>
                <h2>Visualizando evento {{idEvent}} </h2>
                <hr />
                <div class="w3-container">
                    <form class="w3-form">
                        {{#eventSingle}}
                        <label>Descrição</label>
                        <textarea class="w3-input w3-bordered" rows="5" disabled={{disabled}}>{{description}}</textarea>
                        <label>Titulo</label>
                        <input type="text" class="w3-input" value="{{title}}" disabled={{disabled}} placeholder="Titulo do evento">
                        <label>Data</label>
                        <input type="text" class="w3-input" value="{{when}}" disabled={{disabled}} placeholder="Data do evento">
                        <label>Local</label>
                        <input type="text" class="w3-input" value="{{where}}" disabled={{disabled}} placeholder="Local do evento">
                        <label>Horario</label>
                        <input type="text" class="w3-input" value="{{time}}" disabled={{disabled}} placeholder="Horario do evento">
                        <label>Autor</label>
                        <input type="text" class="w3-input" value="{{author}}" disabled={{disabled}} placeholder="Autor do evento">
                        <br />
                        <button class="w3-button w3-dark-grey w3-left w3-margin" on-click="@.enableEdit()">Editar</button>
                        <button class="w3-button w3-blue w3-left w3-margin" on-click="@.addEvents()" disabled={{disabled}}>Salvar</button>
                        {{/eventSingle}}
                    </form>
                </div>
                </div>
            </div>
        </div>
       </script>


   //Component _EventList
        var EventList = Ractive.extend({
            template:'#eventlist',
            oninit:function(){               
                this.set('disabled', true)
            },
            data:function(callback){
                $.get('http://localhost:3000/eventos', function(data){
                        callback.call(null, {
                            title: 'Lista dos ultimos eventos publicados',
                            eventSingle: {},
                            events: data
                        })
                })
                console.log(this)        
            },

            viewEvent: function(id){
                this.set('idEvent', id)
                document.getElementById('id01').style.display = 'block'
                var evt;
                this.get('events').forEach(function(item){
                    if(item.id == id){
                        evt = item;
                    }
                })

                this.set('eventSingle', evt)
            },
            enableEdit:function(){                
                this.toggle('disabled')
            }
        })

I have the context where it is inserted, which is in a main component. 

//Template main

    <script id="mainpage" type="text/ractive">
        <header>        
            <div class="w3-bar w3-dark-grey">
                <a href="#" class="w3-bar-item w3-mobile test">Event publisher</a>
                <a href="" on-click="@.logout()" class="w3-bar-item w3-button w3-mobile w3-right">
                    <i class="fa fa-fire-extinguisher"></i> Sair
                </a>
                <a href="#/ticket" on-click="@.getRoute("#/support")" class="w3-bar-item w3-button w3-mobile w3-right">
                    <i class="fa fa-fire-extinguisher"></i> Suporte
                </a>                  
                <a href="#/publish" on-click="@.getRoute("#/publish")"class="w3-bar-item w3-button w3-mobile w3-right">
                    <i class="fa fa-globe"></i> Publicar
                </a>
                <a href="#/home" on-click="@.getRoute("#/home")" class="w3-bar-item w3-button w3-mobile w3-right">
                    <i class="fa fa-home"></i> Home
                </a>
            </div>
        </header>
            <aside> 
                <div class="w3-container w3-quarter">
                    <h4>Helper <small class="w3-tiny"> Links de ajuda</small></h4>
                </div>
            </aside>
            <div class="w3-container w3-rest">
                {{#if home}}
                    <eventlist />
                {{elseif publish}}
                    <eventform />
                {{elseif support}}
                    <div>item4</div>
                {{else}}
                    <p>Ops error 404, a pagina solicitada não existe!<p>
                {{/if}}
            </div>
    </script>


    //Main instance of _Ractive
        var ractive = new Ractive({
            target:'#app',
            template:'#mainBox',
            components:{
                boxlogin:BoxLogin,
                eventlist:EventList,
                eventform:EventForm,
                mainpage:MainPage
            },
            oninit: function(){
                this.set('isLogged', true);
            } 
        })
    
asked by anonymous 30.03.2018 / 16:20

1 answer

0

This is not working because you are trying to access a result through a callback (the callback of jQuery.get ).

As $.get is asynchronous, we can not assign a value in return , but rather create a callback , see: 

var EventList = Ractive.extend({
  template: '#eventlist',
  isoleted: false,
  oninit: function() {               
    this.set('disabled', true);
  },
  data: function(callback) {
    $.get('http://localhost:3000/eventos', function(data) {
      callback.call(null, {
        title: 'Lista dos ultimos eventos publicados',
        eventSingle: {},
        events: data
      });               
    });  
  }
});

/**
 * Um exemplo de uso:
 */
EventList.data(function(data) {
  console.log(data); // Seu resultado será exibido.
});

Does this solve?

    
30.03.2018 / 17:17
Asp.net GridView Query My bot in Google Apps Script does not send emojis to Telegram!