Riotjs에서 Ajax 비동기 요청 받기

async get 요청으로 작동하도록 코드를 가져올 수 없습니다. 내 File todo.tag.html의 Table에 GET 요청을 통해 얻은 JSON Objects를로드하려고합니다. 내 문제는 어떻게 매개 변수를 전달할 수 있습니다. 난 내 폭동 태그에 매개 변수를 전달하고 싶지만 어떻게 해야할지 모르겠다. 나는 각 태그 = "{allTodos()}"로 태그를 시도했다. 이 메서드는 실제로 async : false를 설정하면 작동하지만 true는 true로 설정되지 않습니다. 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/에 대한 튜토리얼, 그것은 필요) 현재 레코드에 대한 참조를 가져온 다음 레코드와 함께 t라는 매개 변수를 전달합니다.

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

그런 다음 todo 태그에서 매개 변수 인 opts 및 t를 사용하여 레코드에 액세스합니다.

{ opts.t.due_date }

또한 태그를 탑재 할 때 실행될 this ('mount')와 업데이트를 강제 실행하는 this.update()를 사용했습니다. 자기 =이 컨텍스트 여기

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

을 유지하는 것은 간단한 코드

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

그리고 난 당신이에 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>

에게 있습니다 todos를 다시 렌더링하고 데이터를 할당하는 success 콜백 함수. 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() 
     } 
    }); 
}

출처

2016-11-27 00:18:24 vitomd

아주 많이 저를 위해 그것을 해결합니다. 또 다른 방법으로 {opts.t} 매개 변수를 배열에 저장할 수 있습니까? 나는 항상 정의되지 않은 것을 얻는다. – member2

opts.t는 단일 객체입니다. 아니면 배열에 집어 넣을 것을 의미합니까? var ts = []; ts.push (t)? 또는 정확히 무엇을 의미합니까? 당신은 적절한 대답을 줄 수 있도록 세부 사항을 가진 새로운 질문을 만들 수 있습니다. – vitomd

미안하지만, 나쁘게 설명했습니다. 그러나 push (t)는 내가 원했던 것입니다. 감사 – member2

답변

관련 문제