2016-09-01 3 views
0

流星で私は新しいアクションフォームからいくつかの新しいアクションカードを作成しました。 1つのアクションカードをクリックすると、1枚のカードではなく、すべてのカードが機能しています。どうすれば問題を解決できますか?誰かが私を助けてくれますか? ここに私のコードを添付しています。 HTML:流星ではすべての代わりに電流の機能をどのように修正するのですか?

 <!--New Actionform--> 

<div class="workflow" id="createAction"> 
    <form class="workflow-action-form" method="post" id="actionForm"> 
      <div> <input type="text" class="flow-title" name="action_title" placeholder="New Action Name" required/></div> 

      <div class="form-line"></div> 

     <fieldset class="form-group"> 
     <textarea class="form-control" id="skills" name="description" placeholder="Description" required></textarea> 
    </fieldset> 
    <fieldset class="form-group"> 
     <select class="form-control m-b" name="team" required> 
      <option value="" selected="selected">Enter or select Team or People</option> 
            <div class="profile-img-header-no-image"><i class="pe-7s-user-female"></i></div> 
            <option>Derek | Director</option> 
            <option>Lisa | Producer</option> 
            <option><i class="pe-7s-user-female"></i></option> 
     </select> 
    </fieldset> 

    <div class="row"> 
     <div class="col-md-6"> 
    <fieldset class="form-group"> 
       <div class='input-group date' id='datetimepicker3'> 
        <span class="input-group-addon"> 
         <span class="fa fa-calendar"></span> 
         </span> 
        <input type='text' class="form-control" name="s_date" placeholder="Start Date" required/> 
       </div> 
     </fieldset> 
     </div> 
     <div class="col-md-6"> 
     <fieldset class="form-group"> 
       <div class='input-group date' id='datetimepicker4'> 
        <span class="input-group-addon"> 
         <span class="fa fa-calendar"></span> 
         </span> 
        <input type='text' class="form-control" name="d_date" placeholder="Due Date" required/> 
       </div> 
     </fieldset> 
     </div> 
     </div> 
     <fieldset class="form-group"> 
      <select class="form-control m-b" name="link" required> 
       <option value="" selected="selected">Link to Meeting or Event</option> 
            <option>option 1</option> 
            <option>option 2</option> 
            <option>option 3</option> 
            <option>option 4</option> 
      </select> 
     </fieldset> 
     <fieldset class="form-group"> 
      <select class="form-control m-b" name="module_list" required> 
       <option value="" selected="selected">Select a path to the module</option> 
            <option> <a href="{{pathFor route='project'}}"> 
             <div class="nav-rec"> 
              <div class="icon-box one"> 

              <i class="pe pe-7s-display1 text-info"></i> 

              </div> 
              <div class="module-name"> 
              <h5>Projects</h5> 
              </div> 
              </div> 
             </a></option> 
            <option>Collaborators</option> 
            <option>Time</option> 
            <option>Date</option> 
      </select> 
     </fieldset> 

    <fieldset class="form-group"> 
     <textarea class="form-control" id="skills" name="notes" placeholder="Notes" required></textarea> 
    </fieldset> 
    <div class="flex-btn-force-right"> 

    <div class="btn-box"> 
     <button type="button" class="btn btn-info" id="cancelActionBtn">Cancel</button>&nbsp; &nbsp; 
     <button type="submit" class="btn btn-info" id="createActionBtn">Create</button> 
    </div> 
    </div> 

</form> 


</div> 

<!---card after submission of new action form--> 

<div id="newActionCard"> 
    {{#each newaction}} 
       <div class="workflowcard"> 
       <div class="module-card"> 

        <div class=" assigned-team">{{team}}</div> 
        <div class=" newaction-name">{{action_title}}</div><hr> 
        <div class="description">{{description}}</div> 
        <div class=" due-on">Due on:{{d_date}}</div><hr> 
        <div class="subcontent"> 
        {{> actioncardsubcontent}} 
       </div> 
       <div class="reqext"> 
       {{> requestextensioncard}} 
       </div> 
        </div> 
    <div class="btn-box newaction"> 
     <button type="button" class="btn btn-info" id="cancelsub">New Action</button> 
     <button type="submit" class="btn btn-info" id="createbtnsub">Show Options</button> 
    </div> 
    <div class="btn-box showoption"> 
     <button type="button" class="btn btn-info" id="hideoption" style="display:none">Hide Options</button> 
     <button type="submit" class="btn btn-info" id="requestextension" style="display:none">Request Extension</button> 
    </div> 
    <div class="btn-box requestcard"> 
     <button type="button" class="btn btn-info" id="cancelrequest" style="display:none">Cancel Request</button> 
     <button type="submit" class="btn btn-info" id="submitrequest" style="display:none">Submit Request</button> 
    </div> 

      </div> 

       {{/each}} 
     </div> 




</template> 

<template name="actioncardsubcontent"> 
    <div class="subcontent"> 
      <div class="modulepath">{{module_list}}</div> 
      <div class="linkto">Linked To: {{link}}</div> 
      <div class="description">{{description}}</div> 
    </div> 


</template> 

<template name="requestextensioncard"> 
    <div class="reqext"> 
     <fieldset class="form-group"> 
      <h4>Request Extension:</h4><br> 
     <textarea class="form-control" id="skills" name="description" placeholder="Description" required style="height: 100px; width: 270px;"></textarea> 
    </fieldset> 
    <fieldset class="form-group"> 
     <select class="form-control m-b" name="lengthOfExt" required> 
      <option value="" selected="selected">Enter length of request </option> 
            <option>One Day</option> 
            <option>Two Days</option> 
            <option>Three Days</option> 
            <option>Four Days</option> 
            <option>Five Days</option> 
            <option>Six Days</option> 
            <option>One Week</option> 
            <option>two Weeks</option> 
            <option>Three Weeks</option> 
            <option>One Month</option> 
     </select> 
    </fieldset> 
    </div> 

とJS:

Template.workflow.events({ 
    "submit .workflow-form": function(event){ 
     event.preventDefault(); 
     var workflowTitle = event.target.workflowTitle.value; 
     var project = event.target.project.value; 
     var description = event.target.description.value; 
     var team = event.target.team.value; 
     var s_date = event.target.s_date.value; 
     var d_date = event.target.d_date.value; 
     var link = event.target.link.value; 


    var obj={ 
      workflowTitle : workflowTitle, 
      project : project, 
      description : description, 
      team : team, 
      s_date : s_date, 
      d_date : d_date, 
      link : link 
     }; 
     event.target.workflowTitle.value=""; 
     event.target.project.value=""; 
     event.target.description.value=""; 
     event.target.team.value=""; 
     event.target.s_date.value=""; 
     event.target.d_date.value=""; 
     event.target.link.value=""; 

     $('#wfCard').show(); 
     $('#info').show(); 
     $('#createWF').hide(); 



Meteor.call('insertWorkflow',obj); 
     alert("submitted"); 

     }, 

     "submit .workflow-action-form": function(event){ 
     event.preventDefault(); 
     var action_title = event.target.action_title.value; 
     var description = event.target.description.value; 
     var team = event.target.team.value; 
     var s_date = event.target.s_date.value; 
     var d_date = event.target.d_date.value; 
     var link = event.target.link.value; 
     var module_list = event.target.module_list.value; 

    var obj={ 
      action_title : action_title, 
      description : description, 
      team : team, 
      s_date : s_date, 
      d_date : d_date, 
      link : link, 
      module_list : module_list 
     }; 
     event.target.action_title.value=""; 
     event.target.description.value=""; 
     event.target.team.value=""; 
     event.target.s_date.value=""; 
     event.target.d_date.value=""; 
     event.target.link.value=""; 
     event.target.module_list.value=""; 

Meteor.call('insertNewaction',obj); 
     alert("submitted"); 

     }, 
}); 

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

}); 

Template.wdashboard.onRendered(function(){ 

    // Initialize tooltips 
    $('.tooltip-demo').tooltip({ 
     selector: "[data-toggle=tooltip]" 
    }) 

    // Initialize popover 
    $("[data-toggle=popover]").popover({ 
     trigger: 'focus' 
    }); 

    // Initialize star rating 
    $("#input-1").rating(); 

    // Hide Dashboard Button 
    $('#info1').hide(); 
}); 

Template.workflow.events({ 
    "click .actionBtn":function(){ 

     $('#createAction').show(); 

    }, 
    //hide and show workflow buttons 
    "click #createbtn" : function(){ 
     $('#editw').hide(); 
     $('#hidew').hide(); 
    }, 

    "click #createActionBtn" : function(){ 
     $('#editw').show(); 
     $('#hidew').show(); 
    }, 

    "click #createbtnsub" : function() { 
     $(".subcontent").show(); 

     $('.reqext').hide(); 
     $('#cancelsub').hide(); 
     $('#createbtnsub').hide(); 
     $('#hideoption').show(); 
     $('#requestextension').show(); 
     /* var id='#'+this._id; 
     $(id).show();*/ 
    }, 
    "click #hideoption": function(){ 
     $('.subcontent').hide(); 

    }, 

    "click #requestextension":function(){ 
     $('.subcontent').hide(); 
     $('.reqext').show(); 
     $('#cancelrequest').show(); 
     $('#submitrequest').show(); 
     $('#hideoption').hide(); 
     $('#requestextension').hide(); 
     }, 
     "click #cancelrequest":function(){ 
      $(".subcontent").show(); 
      $(".reqext").hide(); 
      $("#hideoption").show(); 
      $("#requestextension").show(); 
      $('#cancelrequest').hide(); 
      $('#submitrequest').hide(); 
     }, 

     "click #hideoption": function(){ 
     $(".subcontent").hide(); 
     $('#cancelsub').show(); 
     $('#createbtnsub').show(); 
     $('#requestextension').hide(); 
     $('#hideoption').hide(); 
     $('.reqext').hide(); 
    }, 


    "click #createbtn": function(){ 
     $("#editw").hide(); 
     $("#hidew").hide(); 
    }, 

    "click #createActionBtn": function(){ 

     $('#createAction').hide(); 
     $('#editw').show(); 
     $('#hidew').show(); 
    }, 
}); 

Template.actioncardsubcontent.rendered = function(){ 
    this.$(".subcontent").hide(); 
}; 

Template.requestextensioncard.rendered = function(){ 
    this.$(".reqext").hide(); 

}; 

答えて

0

私はあなたはそれが難しい問題の部分を見るために作る、あまりにも多くのコードを、提供すると思います。

Template.workflow.events({ 
    "submit .workflow-form": function(event, template) { 
    } 
}); 

2番目のパラメータに注目してください。イベントハンドラの中では、$( '#wfCard')の代わりにtemplate。$( '#wfCard')を使うことができます。テンプレート$関数は、DOM全体を検索するのではなく、スコープを現在のテンプレートインスタンスに制限します。生成されたHTMLも見てください。あなたは一意のIDを生成していないと思います。たとえば、生成されたHTMLでは、同じIDを持つ2つの要素を持つことはできません。あなたは何とかカードごとに一意のIDを生成するか、別の別のCSSクエリを使用する必要があります。

関連する問題