我有一个使用XML数据源的应用程序。
用户可以从下拉列表中选择一个类别,并进行API调用以撤回XML数据源以进行处理。 A)如何使用数据更新我的前端集合? B)如何在更新集合时显示微调器?
的JavaScript
var getJobsByIndustry = function(onet) {
if(typeof(onet) === "undefined")
alert("Must include an Onet code");
var url = "onet=" + onet;
Meteor.call('retrieveJobs', url, function(error, results){
console.log(results)
});
};
Template.selector.events({
'click div.select-block ul.dropdown-menu li': function(e) {
var selectedIndex = $(e.currentTarget).attr("rel");
var val = $('select#industryPicker option:eq(' + selectedIndex + ')').attr('value');
var oldVal = Session.get('currentIndustryOnet');
if(val != oldVal) {
Session.set('currentIndustryOnet', val);
Session.set('jobsLoaded', false);
getJobsByIndustry(val);
}
}
});
模板:
<template name="list">
<div class="col-md-12">
{{#if jobsLoaded}}
<ul class="list-group" id="jobs">
{{#each jobs}}
<li>
<span class="pull-right">{{address}}</span>
<span id="jobTitle">{{title}}</span>
<span id="company">{{company}}</span>
<span id="date"><em>{{dateacquired}}</em></span>
</li>
{{/each}}
</ul>
{{else}}
{{> spinner}}
{{/if}}
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
<select id="perPage" class="selectpicker select-block" _val="{{selected_opt}}">
<option value="10">10 Per Page</option>
<option value="25">25 Per Page</option>
<option value="50">50 Per Page</option>
<option value="100">100 Per Page</option>
</select>
</div>
<div class="col-md-10">
{{{pagination}}}
</div>
</div>
</div>
</div>
</template>
答案 0 :(得分:3)
如果您可以将后端移动到Mongo,而不是自己异步处理XML,那将会很棒。但是,您可以通过以下步骤完成此操作:
Session
中的值)设置为某个值,以指示它正在加载。此用例与Meteor.subscribe
很好地对齐,但您必须自己进行类比。要显示微调器,只需在模板中使用反应变量:
<template name="userList">
<div class="well well-skinny user-list scroll-vertical">
{{#if loaded}}
Users:
{{#each users}}
{{> userPill}}
{{/each}}
{{else}}
{{> spinner}}
{{/if}}
</div>
</template>
loaded
定义为
Template.userList.loaded = -> Session.equals("userSubReady", true)
我从我的应用程序中提取了这个示例,该应用程序在几个地方使用了微调器(https://github.com/mizzao/CrowdMapper/tree/master/client/views)以及Meteor的spin.js包:https://github.com/SachaG/meteor-spin。如果您有兴趣,请查看我链接的代码以获取更多详细信息。