LoginSignup
10
9

More than 5 years have passed since last update.

Ractive.jsで 取得したデータ自身から発火して更に自発的に詳細データを取得

Last updated at Posted at 2014-09-08

最近、Ractive.jsを使っていてとても楽しいので、初めての投稿にチャレンジです。変なところがあったらご教示ください。

Ractive.jsで onLoad

ページ読み込み後すぐに、json取得などのイベントを発火したい

テンプレートに書くイベントトリガはon-clickみたいな物はあるけど、on-loadって書くとこないなあ(考えてみれば当たり前なんでしょうけど)と思っていて、
最初は、Ractive.extend();でinit:〜に書かなきゃいけないのかなあとか訳の分からないことを考えたのですが、ぜんぜんシンプルにいけました。
ractive.fire()は、まずは自分のスコープ内で、this.fire()として使っていたのだけど、つまりグローバルスコープでもどこでも使えるということが分かりました。

var ractive = new Ractive({
    el: "#container",
    template: "#template",
    data:{}
});

//イベント登録
ractive.on({
    getData:function(){
        //ajaxなど何かしらの処理
    }
});

//グローバルですぐにメソッドをトリガー
ractive.fire('getData'):

更に自発的に詳細データを取得

onLoadで取得したデータ自身から発火して、keyから詳細を取得。

別のAPIなどからデータを取って来たりするのに使えるんじゃないかと。
データ取得などにはjQueryを使用し、例えば最初にkeyのみのこういうjsonを取得するとして、

list.json
[{key:'aaa'},{key:'bbb'},{key:'ccc'},{key:'ddd'}]

別のURLからこういう詳細データを(実際にはJSONPなどで)取得する。

detail.json
[
    {key:'ddd', time:'10:00'},
    {key:'aaa', time:'12:00'},
    {key:'ccc', time:'14:00'},
    {key:'bbb', time:'20:00'}
]
var ractive = new Ractive({
        el: "#container",
        template: "#template",
        data:{ myData:null }
});

//イベント登録
ractive.on({

    getData:function(){

        var self = this;

        $.getJSON(
            'http://sample.com/data/list.json',
            function(json){
                self.set('myData',json);
            });
    },

    getDetail:function(key){

        var self = this;
        var datas = this.get('myData');

        $.getJSON(
            'http://api.com/data/detail.json',
            {key:key},
            function(json){

                datas.forEach(function(data, i) {

                    //キーが一致するデータとマージしてセット
                    (data.key === key) &&
                        self.set('myData.' + i, $.extend(data, json.data)); 

                });
            });
    }

});

//observeでmyDataを監視し、各データ中のkeyが空ではなくなったらkeyを引数にgetDetailを発火
ractive.observe('myData.*.key',function(newVal){

    if(newVal !== null){
        this.fire('getDetail',newVal);
    }

}):

//ここで最初のデータを読み込む
ractive.fire('getData');

なんかこれだと無駄なことをやっているようですが、もっと複雑なことが簡単にできます。で、データを取得する前と後で表示を切り替えるのもRactiveなら簡単ですよね。

10
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
9