(编辑以减少问题范围)
这是Passing array via ReactiveVar in Meteor的后续内容,它将数组作为反应变量进行了讨论,但没有详细介绍实现。对于冗长的帖子道歉,但我有两个相互交织的问题。
我的目标是允许用户使用集合中的公司信息填充数据表。用户在输入框中输入公司名称,该输入框在单击时填充数组。然后,该数组更新一个选择器,该选择器确定应该显示该集合的哪个子集。
我正在使用manuel:reactivearray包。我查看了模板:数组,但有一个明确的说明,它只适用于客户端,我想知道这是否会导致问题。下面的代码用Apple的行填充我的DataTable,它被硬编码到数组声明中。我还可以将新值推送到数组,并在控制台中查看它。所以代码工作正常。
我有两个问题:
基本的Javascript问题,但这个ReactiveVariable存储在某个地方吗?它在浏览器刷新时被销毁。我在这个主题上阅读的所有内容都是指localstorage,它是特定于浏览器的,或者提供硬编码值的示例,这些都没有任何帮助。我没有看到用户以后如何添加其他值或在其他设备上查看模板。
有人可以帮我使用Tracker.autorun代码,以便根据对数组的更改来更新选择器吗?我使用http://reactivearray.meteor.com/中的示例添加的代码会导致意外的令牌错误。
感谢您的耐心和任何提前指导。
的客户机/ company_comps.js
compset = new ReactiveArray(["Apple"]);
Template.CompanyComps.events ({
'click .addComp': function (event) {
event.preventDefault();
comp = document.getElementById("comp");
compset.push(comp.value);
comp.value = "";
return compset;
}
});
Template.CompanyComps.helpers({
Tracker.autorun(function() { //these two lines crash my app
compset.depend(); //these two lines crash my app
//Define selector for datatable - select documents whose "name" is in "compset" array
comps: function () {
return {name: {$in: compset.array()}};
}
})
});
的客户机/ company_comps.html
<template name="CompanyComps">
<div>
<div>
<h3>Comps</h3>
</div>
<div>
<form class="addComps">
<input type="text" name="comp" id="comp" placeholder="Type company name" />
<button type="submit" class="addComp">Add Company</button>
</form>
<br><br>
</div>
<div>
{{> tabular table=TabularTables.Comps selector=comps id="comps" class="table table-striped table-bordered table-condensed"}}
</div>
</div>
</template>
LIB / datatables.js
TabularTables = {};
Meteor.isClient && Template.registerHelper('TabularTables', TabularTables);
TabularTables.Comps = new Tabular.Table({
name: "Comps",
collection: Companies,
columns: [
{data: "name", title: "Company"},
{data: "sector", title: "Sector"},
{data: "capTable.marketCap", title: "Market Cap"}
]
});