Mongo选择器的Reactive数组用于填充Meteor中的Datatable

时间:2015-04-03 18:57:52

标签: javascript arrays meteor datatables reactive-programming

(编辑以减少问题范围)

这是Passing array via ReactiveVar in Meteor的后续内容,它将数组作为反应变量进行了讨论,但没有详细介绍实现。对于冗长的帖子道歉,但我有两个相互交织的问题。

我的目标是允许用户使用集合中的公司信息填充数据表。用户在输入框中输入公司名称,该输入框在单击时填充数组。然后,该数组更新一个选择器,该选择器确定应该显示该集合的哪个子集。

我正在使用manuel:reactivearray包。我查看了模板:数组,但有一个明确的说明,它只适用于客户端,我想知道这是否会导致问题。下面的代码用Apple的行填充我的DataTable,它被硬编码到数组声明中。我还可以将新值推送到数组,并在控制台中查看它。所以代码工作正常。

我有两个问题:

  • 存储变量

基本的Javascript问题,但这个ReactiveVariable存储在某个地方吗?它在浏览器刷新时被销毁。我在这个主题上阅读的所有内容都是指localstorage,它是特定于浏览器的,或者提供硬编码值的示例,这些都没有任何帮助。我没有看到用户以后如何添加其他值或在其他设备上查看模板。

  • Tracker.autorun语法

有人可以帮我使用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"}
    ]
});

0 个答案:

没有答案