2016-11-26 5 views
0

async get要求を処理するコードを取得できません。 私は、ファイルtodo.tag.htmlのテーブルにあるGETリクエストを介して取得したJSONオブジェクトをロードします。 私の問題は、どのようにパラメータを渡すことができるかです。私は暴動のタグにパラメータを渡したいが、私は方法を知らない。私はeach = "{allTodos()}"タグで試してみました。このメソッドは実際に私がasync:falseを設定していて、async trueではない場合に機能します。 allTodosはJSONオブジェクトを取得するメソッドです。誰でも私が何ができるのか知っていますか? これは私の(簡体字)コード のindex.htmlです:どのように私のRiotjsでAjax非同期リクエストを取得する

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

の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> 

ザッツ:

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

答えて

3

タグ通信では、タグでパラメータを送信し、次に子オブジェクトで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を使用してレコードにアクセスします。

また、タグをマウントするときに実行される( '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を(呼び出すことができると思い非同期機能についてである)でtodoを再レンダリングしてデータを代入する成功コールバック関数 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() 
     } 
    }); 
} 
+0

非常にそれは私のためにそれを解決します。もう1つの方法は、{opts.t}パラメータを配列に保存する方法です。私はいつも未定義です。 – member2

+0

opts.tは配列ではなく、単一のオブジェクトです。または配列にプッシュすることを意味しますか? var ts = []のように。 ts.push(t)?またはあなたは正確に何を意味するのですか?あなたは適切な答えを与えることができるように詳細で新しい質問を作成することができます – vitomd

+0

申し訳ありませんが、それはひどく説明しました。しかし、プッシュ(t)は私が望んだものです。ありがとう – member2

関連する問題