Ajax Riotjs 中的异步获取请求

Question

我无法让我的代码处理异步获取请求。我想在我的文件 todo.tag.html 中的 Table 中加载通过 GET 请求获得的 JSON 对象。我的问题是如何传递参数。我想将参数传递给我的防暴标签，但我不知道如何。我在我的标签中尝试了 each="{ allTodos() }" 。如果我设置 async:false 但不是 async true，则此方法实际上有效。 allTodos 是获取 JSON 对象的方法。有人知道我能做什么吗？这是我的（简化的）代码 index.html:

 <!DOCTYPE html>
<head>

  <link rel="stylesheet" type="text/css" href="./jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="./style.css">
  <link rel="stylesheet" type="text/css" href="./stylesheet.css">
  <script src="./jquery-1.12.4.js"></script>
  <script src="./jquery-ui.js"></script>

</head>
<body>

        <script src="js/riot+compiler.min.js"></script>
        <script type="riot/tag" src="todo-form.tag.html"></script>
        <script type="riot/tag" src="todo.tag.html"></script>
    </script>
    <script>riot.mount('todoForm');</script>
                        <form>
                         <todo-form><todo-form>
                        <form>
</body>
</html>

todo.tag.html:

<todo>
<table style="width:100%">
  <tr>
    <td><label><input type="checkbox" checked={ done }> { title }</label> </td>
    <td><p>{ due_date } <button type="button">Delete</button></p></td>
  </tr>

</table>


</todo>

待办事项-form.tag.html

<todo-form>


    <fieldset class="Issues">
        <legend>Issues</legend>
        <ul>
            <todo each="{ allTodos() }"> </todo> // This here is the problem
        </ul>
    </fieldset>


    <script>

        // return all todos
        allTodos(){
        var test = [];

        var url = 'http://myurl.com/projects'; //random adress

         $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                test = data;
                }
                });

        return test;
        }
    </script>

</todo-form>

这就是我的 JSON 对象的样子

[
  {

    "done": true,
    "title": "tests",
    "due_date": "2016-11-20T23:00:00.000Z"
  },
 {

    "done": true,
    "title": "tests2",
    "due_date": "2016-11-20T23:00:00.000Z"
  }
]

Answer 1

对于标签通信，您可以在标签中发送参数，然后在 child 中使用选项 object。（如果你需要，这里有一个关于标签通信的教程http://vitomd.com/blog/coding/tag-communication-in-riot-js-part-1/）

这是一个示例（删除异步功能，因为这是另一个问题）如您所见，我使用 'todo in todos' 获取当前记录的引用，然后我将一个名为 t 的参数与记录一起传递。

<todo each="{ todo in todos }" t={todo} > </todo>

然后在 todo 标签中，我使用 opts 和参数 t 访问记录。

{ opts.t.due_date }

我还使用了 on('mount') 它将在安装标签时执行，并使用 this.update() 强制更新。和 self=this 来维护上下文

var self = this
this.todos = []
this.on('mount', function(){
  self.todos = self.allTodos()
  self.update()
})

这里是简化代码

<todo-form>
  <fieldset>
    <legend>Issues</legend>
    <ul>
      <todo each="{ todo in todos }" t={todo} > </todo>
    </ul> 
  </fieldset>

  <script>
    var self = this
    this.todos = []
    this.on('mount', function(){
      self.todos = self.allTodos()
      self.update()
    })
    allTodos(){
      var test = [{done:'true', due_date:'11', title:'the title'}, {done:'true', due_date:'11', title:'the title'}]
      return test
    }
  </script>
</todo-form>

<todo>
  <table>
    <tr>
      <td><label><input type="checkbox" checked={ opts.t.done }> { opts.t.title }</label> </td>
      <td><p>{ opts.t.due_date } <button type="button">Delete</button></p></td>
    </tr>
  </table>
</todo>

http://plnkr.co/edit/PqLFIduigsOYd2XQ5LWv?p=preview

关于异步函数，我认为您可以在成功回调函数中调用 self.update() 来重新呈现待办事项并将数据分配给 self.todos = 数据

var self = this
allTodos(){
  var url = 'http://myurl.com/projects'; //random adress
   $.ajax({
        url: url,
        type: "GET",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function(data) {
          self.todos = data
          self.update()
        }
    });
}

Ajax Riotjs 中的异步获取请求

Ajax async get request in Riotjs

javascript

jquery

json

ajax

riot.js