1

それで、ガイドに従ってRiot JSを学んでいます。手順を説明する例を示します。そして、「this.update()」を追加して、riot js 変数を更新します。今、それは彼のために働いていますが、私にとってはそうではありません. 理由を教えてください。

これがコードです。

これはindex.htmlです

<body>
    <script src="bower_components/riot/riot.min.js" type="text/javascript"></script>
    <script src="tags/all.js" type="text/javascript"></script>

    <contact-list></contact-list>

    <script>

        riot.mount('contact-list', {callback: tagCallback});        

        function tagCallback(theTag) {
            console.log('callback executed');
            var request = new XMLHttpRequest();
            request.open('GET', 'people.json', true);
            request.onload = function() {
                if(request.status == 200) {
                    var data = JSON.parse(request.responseText);
                    console.log(data);
                    theTag.trigger('data_loaded', data);
                }
            }

            setTimeout(function() {
                request.send(); 
            },2000);

        }
    </script> 
</body>

そして、これは私の contact-list.tag です

<contact-list>
    <h1>Contacts</h1>
    <ul>
        <li each={p in opts.people}>{p.first} {p.last}</li>
    </ul>


    <script>
        this.on('mount', function() {
            console.log('Riot mount event fired');
            opts.callback(this);
        })

        this.on('data_loaded', function(peeps) {
            console.log(peeps);
            opts.people = peeps;
            this.update();
        }) 

    </script>
</contact-list>

console.logs でデバッグした後、JSON ファイルからデータを正しく取得していることがわかります。連絡先リストのデータはそこにあります。しかし、箇条書きリストは更新されません。空っぽで表示されます。

4

2 に答える 2

-3

ああ、気にしないでください、ごめんなさい。ビデオの男の例が実際にどのように機能したかはわかりません。html トリガー イベントで data.people を渡す必要があったためです。それ以外の場合、配列を含む平面オブジェクトを渡していました。

于 2016-03-03T13:41:36.013 に答える