更改客户端数据转换 meteor.js 中的值

Question

在我当前的meteor.js项目中，用户可以创建一个项目并向其中添加数据节点。我正在使用 D3 来显示力图中的节点。当他们单击图中的特定节点时，侧面板中的相应文本必须突出显示。为此，我需要选择跟踪节点。但是，我不想在数据库中存储 "selected" 字段。

我现在正在使用此数据转换来添加所选字段 -

/lib/routes.js

Router.route('/project/:code', {
    name: 'projectPage',
    data: function() { 
            return {
                project: Projects.findOne({code : this.params.code}), 
                nodes: Nodes.find({project: this.params.code}, {transform: function (doc) {
                       doc.selected = false;
                       return doc;
                    }})
            }

        }
});

模板是/client/templates/projectPage.html

<template name="projectPage">
  <div class="project-page page">
    <h3>{{project.title}}</h3>
    <p>{{project.summary}}</p>
    <div class="work-area">
        <div class="map-space">
            {{> nodeDisplay nodes=nodes}}
        </div>
        <div class="type-space">
            {{> typeDisplay nodes=nodes}}
        </div>
    </div>
  </div>
</template>


<template name="nodeDisplay">
   <div id="svgdiv"></div>
</template>

<template name="typeDisplay">
    {{#each nodesData}}
        <p>{{text}}</p>
        <br/>
    {{/each}}
</template>

点击事件处理/client/js/projects.js

Template.nodeDisplay.events({
    'click .node':function(event, template){
        /*remove previous selection*/
        d3.selectAll('.selected circle').attr("r",32);
        d3.selectAll('.selected').each(
            function(d){
                d.fixed = false;
                d3.select(this)
                .classed('selected', false);
            }
        );

        /*add new selections*/
        d3.select(event.currentTarget)
        .classed("selected", true)
        d3.selectAll('.selected circle').attr("r",40);
        var selected_id = $(event.currentTarget).data("id");
        Nodes.update(selected_id.toString(), {$set: {selected: true}});
    }
});

但是，这会更新数据库以包含 "selected" 字段。有没有更好的方法来做到这一点并保持反应性？

Answer 1

流星方式是使用会话变量和辅助函数。

所以

Nodes.update(selected_id.toString(), {$set: {selected: true}});

使用

Session.set("selected_node", this._id);

和 Template.typeDisplay.helpers

的随行助手

isNodeSelected: function() {
  if(Session.get("selected_node") === this._id) {
    return "selected"
  }
}

在显示每个节点的模板中（此代码假定您希望通过应用类名 'selected' select typeDisplay 中的相应文本）：

<template name="typeDisplay">
  {{#each nodesData}}
    <p class="{{isNodeSelected}}">{{text}}</p>
    <br/>
  {{/each}}
</template>

更改客户端数据转换 meteor.js 中的值

change client data transforms value in meteor.js

d3.js

meteor