如何使用Meteor.Call从服务器存储到客户端获取JSON数据并在模板中同步更新返回数据？

I have a file named countries.json in the root/private folder. I want to show all country names in a multi select box within the "newCampaignForm" template. getCountryList method on the server return the json object to the client.
The console log always show the returned object and sometime print undefined and then the object.
However, the select box usually do not show the country list; only once on every server restart when console log doesn't print undefined at first. How to solve this problem?

我在root / private文件夹中有一个名为countries.json的文件。我想在“newCampaignForm”模板中的多选框中显示所有国家/地区名称。服务器上的getCountryList方法将json对象返回给客户端。控制台日志始终显示返回的对象,有时打印undefined,然后是对象。但是,选择框通常不显示国家/地区列表;每个服务器上只有一次重新启动时,控制台日志首先不打印未定义。如何解决这个问题呢?

Reading various QA here, I guess I have to make the function synchronous using Meteor.wrapAsync function but I find it very hard to write Meteor.wrapAsync in proper way that works. As a beginner , I find it hard to follow the meteor docs which lacks easy examples and due to my confusion about callback functions.
If Meteor.wrapAsync is the solution here, then please re-write my code below that works. This is my 1st question here. Thanks a lot!

在这里阅读各种QA,我想我必须使用Meteor.wrapAsync函数使函数同步,但我发现很难以正确的方式编写Meteor.wrapAsync。作为初学者,我发现很难关注那些缺乏简单示例的流星文档以及由于我对回调函数的困惑。如果Meteor.wrapAsync是这里的解决方案,那么请重新编写下面的代码。这是我的第一个问题。非常感谢!

//CLIENT SIDE CODE

Template.newCampaignForm.onRendered(function() {

    Meteor.call('getCountryList',function(err,result){
         
                    Session.set('cData',result);

                    });
}

Template.newCampaignForm.helpers({

  countryList:function() {
 
      console.log(Session.get('cData'));
      return Session.get('cData');

        }

    });
    

// SERVER SIDE CODE

getCountryList:function () {
    var country = {};
   country = JSON.parse(Assets.getText('countries.json'));
 return country;
 }


// Loop on Template

<select data-placeholder="Choose a Country..." class="chosen-select form-control" id="targetCountries" multiple tabindex="1">

   {{#each countryList}}

    <option value = "{{name}}" > {{name}} </option>

    {{/each}}

</select>

1 个解决方案

#1

I have created

我创造了

this very simple MeteorPad Playground

这个非常简单的MeteorPad游乐场

and

this MeteorPad Playground with ReactiveVar

这个带ReactiveVar的MeteorPad游乐场

and this

Gist Example

as an answer.

作为答案。

Remaining to your question:

还有你的问题:

Maybe your JSON is not a valid array

也许你的JSON不是一个有效的数组

Event is rendered not onRendered

事件呈现的不是onRendered

When countryList should be an array, you used the wrong naming {{name}} instead of {{this}} on template (this depends a bit of your JSON I do not know yet)

当countryList应该是一个数组时,你在模板上使用了错误的命名{{name}}而不是{{this}}(这取决于你的JSON我还不知道)

#1