流星js显示方法的结果

时间:2018-03-20 17:26:06

标签: javascript meteor

我有一个模板,我试图显示一个应该从方法修改的变量

看看我的代码是什么样的

html

{{test}}

服务器:

if (Meteor.isServer) {
    Meteor.methods({
        callApi: function (term) {
            this.unblock();
            try {
                const result = HTTP.call('GET', 'https://www.googleapis.com/youtube/v3/search')
                return result;
            } catch (e) {
                // Got a network error, timeout, or HTTP error in the 400 or 500 range.
                console.log(e);
                return false;
            }
        }
    });
}

客户

    Template.body.helpers({
        test: 'test'
    });
Template.body.events({
        'submit .media-Search'(event, template) {
            // Prevent default browser form submit
            event.preventDefault();

            // Get value from form element
            const target = event.target;
            const text = target.text.value;

            Meteor.call("callApi", text, function(error, results) {
                if (error)
                    console.log(error);

                template.test = results.data.items[0].snippet.channelId; //results.data should be a JSON object
            });

            // Clear form
            target.text.value = '';
        },
    });

变量确实发生变化,但html页面上没有显示变化,我做错了什么?

非常感谢!

1 个答案:

答案 0 :(得分:2)

您需要将Meteor方法存储在反应变量/反应词典中:

import { ReactiveVar } from 'meteor/reactive-var';

Template.body.onCreated(function() {
    this.test = new ReactiveVar(); // create reactive var

})

稍后在提交活动中:

// ...
Meteor.call("callApi", text, function(error, results) {
    if (error) console.log(error);

    // set value for reactive variable
    template.test.set(results.data.items[0].snippet.channelId);
});

您的模板助手当前是一个字符串(我想知道构建系统不会对此产生错误),但应该是一个返回更新后的反应变量的方法:

Template.body.helpers({
    test() {
        return Template.instance().test.get();
    }
});

您应该阅读有关Blaze和ReactiveVar文档的更多信息:

http://blazejs.org/

https://docs.meteor.com/api/reactive-var.html