【Riot.js】ボタンがクリックされたら、データを取得して表示したい

Question

質問概要

Riot.jsを用いて、
ボタンが押されると、テキストを取得し、PHPにデータを送信し、
返って来た値（JSON）を表示したいが、riot.update();が効かない。

質問詳細

本日Riot.jsを使い始めました。

以下のように、フォームのボタンが押されたらjQueryのajaxを使い、データを取得してくるのですが、
riot.update();が効きません。

dataには、JSONデータが入っております。
これはなぜなのでしょうか。
詳しい方がいらっしゃいましたら、ご教示ください。
よろしくお願いいたします。

<recommend>
<div style="margin: 3px;">
<div class="input-field text-center">
<input id="recommend" type="text" class="validate" placeholder="入力">
<button class="btn waves-effect waves-light" onclick="{click}">取得</button>
</div>
</div>

<br>
<ul>
    <li each='{item_list}'>{gametitle}</li>
</ul>
this.click = function() {
    var txt = $("#recommend").val();

    if ( txt === "" ) return;


    var map = {"title": txt};
    
    //Ajax
    $.ajax({
        type: "POST",
        url: "./operation/get_RecommendFromTitle.php",
	data: map,
        dataType: "json",
    }).done(function(data){
        this.item_list = data;
        riot.update();//効かない
    });

};
</recommend>

Riot v2.6.1

Answer 1

コールバック関数（$.ajax > doneの部分）のコンテキストでは、thisはrecommendを指していません。
コールバック内からrecommendインスタンスを参照できるようにしてあげる必要があります。
※単純なjsonを返すphpスクリプトを置いて動作確認を取りました。

$.ajaxのsettings.contextで指定するパターン [jQuery]

contextに指定されたものがコールバック内でもthisとして扱われます。
http://js.studio-kingdom.com/jquery/ajax/ajax

$.ajax({
  // 略
  context: this // recommendインスタンス
}).done(function(data) {
  // ここでのthisもrecommendインスタンスになる

recommendをコールバック関数にbindするパターン [JavaScript]

recommendを束縛した新しい関数を生成して、コールバックとして渡します。結果は同上。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

}).done(function(data) {
  this.item_list = data;
  riot.update();
}.bind(this));

ざっくり代入パターン [JavaScript]

thisの指すものが変わるのがそもそもの原因なので、一旦別の変数に代入します。

var self = this;

// 中略

}).done(function(data){
  self.item_list = data;
  riot.update();
});

jQueryなので1つ目がよいと思います。

Comments

[nnahito]

ご回答有り難うございます。

＞コールバック関数（$.ajax > doneの部分）のコンテキストでは、thisはrecommendを指していません。
なるほど、そういうことだったのですね。

＞context: this // recommendインスタンス
こちらで無事解決いたしました！
ありがとうございます。