Question

我无法使用我的代码处理异步获取请求。我想在我的文件todo.tag.html的表中加载我通过GET请求获得的JSON对象。我的问题是如何传递参数。我想将参数传递给我的防暴标签，但我不知道如何。我尝试了每个=＆＃34; {allTodos（）}＆＃34;在我的标签。如果我设置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

对于标记通信，您可以在标记中发送参数，然后在子文档中使用opts对象。（如果您需要它，这里有一个关于标记通信的教程http://vitomd.com/blog/coding/tag-communication-in-riot-js-part-1/）

这是一个示例（删除异步功能，因为这是另一个问题）如你所见，我在todos＆＃39;中使用了todo。获取当前记录的引用，然后我传递一个名为t的参数和记录。

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

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

{ opts.t.due_date }

我还使用（＆＃39; mount＆＃39;）它将在安装标记时执行，而this.update（）用于强制更新。和self =这来维持上下文

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 = data

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 async在Riotjs中获取请求

1 个答案: