如何从RiotControl Store进行ajax调用?

问题描述 投票:0回答:1

我使用 Nodejs/Express 创建了 API。 假设我可以向

localhost:8080/list
执行 GET 请求,它会返回我的 TODO 列表的 JSON,我可以 POST 到
localhost:8080/list
以创建新的待办事项列表。

然后我在我的前端网站中使用 Riotjs + Riotcontrol。 如何从 todostore.js 文件请求?

这是我从 riotcontrol demo 文件夹中获取的 riotcontrol todostore.js 文件

防暴

// TodoStore definition.
// Flux stores house application logic and state that relate to a specific domain.
// In this case, a list of todo items.
function TodoStore() {
  riot.observable(this) // Riot provides our event emitter.

  var self = this

  self.todos = [
    { title: 'Task 1', done: false },
    { title: 'Task 2', done: false }
  ]

  // Our store's event handlers / API.
  // This is where we would use AJAX calls to interface with the server.
  // Any number of views can emit actions/events without knowing the specifics of the back-end.
  // This store can easily be swapped for another, while the view components remain untouched.

  self.on('todo_add', function(newTodo) {
    self.todos.push(newTodo)
    self.trigger('todos_changed', self.todos)
  })

  self.on('todo_remove', function() {
    self.todos.pop()
    self.trigger('todos_changed', self.todos)
  })

  self.on('todo_init', function() {
    self.trigger('todos_changed', self.todos)
  })

  // The store emits change events to any listening views, so that they may react and redraw themselves.

}
ajax riot.js riotcontrol
1个回答
0
投票

你可以在你的

TodoStore

中做这样的事情
self.on('todo_init', function() {                                
  // Trigger loading here perhaps, then set loading = false when it's loaded
  //self.trigger('set_loading', {value: true})                  
  fetch('http://localhost:8080/list')                        
              .then(response => response.json())                            
              .then(function (json) {                                       
                  self.todos = json                    
                  self.trigger('todos_changed', self.todos) 
              })                                                            
}) 
© www.soinside.com 2019 - 2024. All rights reserved.