Изменение данных клиента преобразует значение в meteor.js

Question

В моем текущем проекте meteor.js пользователь может создать проект и добавить к нему узлы данных. Я использую D3 для отображения узлов в графе силы. Когда они нажимают на определенный узел из графика, соответствующий текст на боковой панели должен быть выделен. Для этого мне нужно отслеживать с помощью узла. Но я не хочу хранить «выбранное» поле в базе данных.

Я использую эти данные преобразования, чтобы добавить выбранное поле прямо сейчас -

/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); 

и помощник accompnying в Template.typeDisplay.helpers

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

в шаблоне отображаются каждый узел (этот код предполагает, что вы хотите выбрать соответствующий текст в typeDisplay, применив имя класса 'selected'):

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