javascript - 使用集合过滤事件

Question

我有包含单独集合的项目和工作流程。

collections:
Project = new Meteor.Collection("project");
Workflow = new Meteor.Collection("workflow");

创建项目后，我在表单中选择项目并显示工作流程图。

HTML:
<!-- Workflow Card -->


  <div id="wCard">

                {{#each workflow}}

                **<div class="pheader">
                     <h2>{{project}}</h2>
                     <hr width="100%">
                </div>**

                     <br>
                 <div class="workflowcard">
                 <div class="module-card">
                     <div class="card-header wfmodule">{{workflowTitle}}</div>
                   <div class="casting">
                    <div class="assigned-tag">Assigned To:</div>
                    <div class="assigned-to">{{team}}<hr></div>
                    <div class="actions">No Actions Created</div>
                    </div>
                    <div class="due">

                       Due on:

                        <div>
                            <div class="day-stamp" >{{weekday d_date}}</div>
                        <div class="date-stamp">{{date d_date}}</div>
                        <div class="month-stamp">{{month d_date}}</div>
                        </div>
                    </div>
                </div>
              <div class="btn-box showmuloption">
      <button type="edit" class="editw"  style="display:none">Edit Workflow</button>
      <button type="hide" class="hidew"  style="display:none">Hide Actions</button>
      <div class="actionBtn"><button class="btn-wf stage-blue-wf button-x-small-wf" id="newAction">New Action</button></div>

    </div>
            </div>
                {{/each}}
        </div>  

.JS:



Template.workflow.helpers({
    getWorkflow: function(){
        return Workflow.find();
    },
    user: function(){
 return  Meteor.users.find({});
 },
 getNewaction: function(){
        return Newaction.find();
    },

});

现在工作流卡显示在列表中。我想根据项目显示工作流程。如果我选择一个项目，工作流应该转到那个项目，我用相同的项目创建另一个工作流，它应该显示在那个项目中。如果我选择另一个项目，工作流应该显示在该相关项目中。

请帮忙解决这个问题。

Answer 1

我为此使用 react 变量。 首先你需要添加 meteor 包:

$ meteor add reactive-var

您的项目选择表单可能如下所示:

<select id="project" value="{{getProject}}">
   {{#each getProjectsList}}
      <option id='{{_id}}' value="{{_id}}">{{projectname}}</option>
   {{/each}}
</select>

不要忘记创建助手 getProject 和 getProjectsList。 现在是 react 变量的时候了，你可以在 onCreated 事件中初始化它。

Template.workflow.onCreated(function() {
   var instance = this;
   instance.projectId = new ReactiveVar(null);
});

当你改变选择的项目时，你应该改变你的 react 变量。

Template.workflow.events({
   'change #project': function(){
      Template.instance().projectId.set($("#project").val());
});

每个工作流都需要有带有项目 ID 的字段。你得到这样的工作流列表

{{#each getWorkflows}}

还有获取工作流列表的助手:

Template.workflow.helpers({
    getWorkflows: function() {
       var id = Template.instance().projectId.get();
       return Workflow.find({projectId: id});
    },

    ...// another helpers

})

所以，当你改变项目的形式时，工作流列表也会改变，因为它依赖于 react 变量。您也可以只订阅需要的工作流对象，而不是所有集合。 我希望这对某人有帮助。