在Riotjs Ajax异步获取请求

我不能让我的代码与异步获取请求一起工作。我想通过我的文件todo.tag.html中的表中的GET请求加载JSON对象。我的问题是如何传递参数。我想将参数传递给我的暴乱标签，但我不知道如何。我在标签中用each =“{allTodos（）}”试了一下。这个方法实际上工作，如果我设置async：false，但不与async真正。 allTodos是获取JSON对象的方法。任何人都知道我能做什么？这是我（简化）代码的index.html：在Riotjs Ajax异步获取请求

<!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" 
    } 
]

来源

2016-11-26 member2

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

下面是一个示例（除去异步功能，因为这是另一个问题）正如你可以看到我用“TODO在待办事项”获得参考当前记录，然后传递一个名为t的参数与记录。

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

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

{ opts.t.due_date }

另外我在（'mount'）上使用它将在挂载标签时执行，并使用this.update（）强制更新。和自我=这对保持上下文

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() 
     } 
    }); 
}

来源

2016-11-27 00:18:24 vitomd

非常多，为我解决它。另一件事我该如何将参数{opts.t}保存到数组中？我总是得到一个未定义的。 – member2

opts.t不是一个数组，而是单个对象。或者你的意思是推入一个数组？像var ts = []; ts.push（t）？或者你的意思是什么？你可以创建一个新的问题与细节，所以我可以给出正确的答案 – vitomd

对不起，我形容它很糟糕。但推（t）是我想要的。谢谢 – member2

在Riotjs Ajax异步获取请求

回答

相关问题