2017-11-21 10 views
0

をコードで正しくリフレッシュしていないビューは、クライアントの詳細を示す「show.ejs」というビューがあります。 proble;今は、クライアントの詳細(イメージ、関連するドキュメントなど)を更新すると、内容は同じままで、ページを更新する場合(F5まで)にのみ変更されます。 この私の更新とClientControllerでアクションを示しています。SailsJS

findOne : function(req,res){ 
    Client.findOne({ 
     id : req.param('id') 
    }) 
    .populate('docs') 
    .populate('sites') 
    .exec(function(err,client){ 
     if(err) throw err; 
     if(client) { 
     return res.view('client/show', { 
      client : client 
     }); 
    } else { 
     return res.redirect('/client'); 

    } 
    }) 

}, 
update : function(req,res){ 
    var name = req.param('name'), 
     id = req.param('id'), 
     town = req.param('town'), 
     adress = req.param('adress'), 
     postalCode = req.param('postalCode'), 
     telephone = req.param('telephone'), 
     email = req.param('email'), 
     fax = req.param('fax'), 
     responsable = req.param('responsable'), 
     website = req.param('website'), 
     activity = req.param('activity'); 

    Client.findOne({id : id}).exec(function(err,client) { 
     if(err) console.log(err); 
     client.name = name; 
     client.town = town; 
     client.adress = adress; 
     client.telephone = telephone; 
     client.fax = fax; 
     client.website = website; 
     client.email=email; 
     client.responsable=responsable; 
     client.postalCode=postalCode; 
     client.activity = activity; 
     client.save(); 
     req.file('logo').upload({ 
       dirname: require('path') 
         .resolve(sails.config.appPath+'/assets/uploads/clients/logos/') 
       }, function (err, logo) { 
           if (err) throw err; 
           if(typeof logo !== 'undefined' && logo.length > 0) { 
            require('fs').unlink('./assets/uploads/clients/logos/'+client.logo, function(err){ 
              if(err) console.log(err) 
              client.logo = require('path').basename(logo[0].fd); 
              client.save(); 
                }) 
           } 
           return res.redirect('/client/'+client.id); 
          }); 
    }) 
} 

を、これはどのように私のセットアップ図である。

<div class="row"> 
        <div class="col-md-12"> 
         <!-- BEGIN PROFILE SIDEBAR --> 
         <div class="profile-sidebar" style="background-color: #f5f5f5;"> 
          <!-- PORTLET MAIN --> 
          <div class="portlet light profile-sidebar-portlet " style="background-color: #f5f5f5;"> 
           <!-- SIDEBAR USERPIC --> 
           <div class="profile-userpic"> 
            <img src="/uploads/clients/logos/<%= client.logo %>" class="img-responsive img-circle" alt="image client"> </div> 
           <!-- END SIDEBAR USERPIC --> 
           <!-- SIDEBAR USER TITLE --> 
           <div class="profile-usertitle "> 
            <div class="profile-usertitle-name"><%= client.name %></div> 
            <div class="profile-usertitle-job"> Client </div> 
           </div> 

          </div> 
          <!-- END PORTLET MAIN --> 
          <!-- PORTLET MAIN --> 
          <div class="portlet light " style="background-color: #f5f5f5;"> 
           <!-- STAT --> 
           <div class="row list-separated profile-stat"> 
            <div class="col-md-6 col-sm-6 col-xs-6"> 
             <div class="uppercase profile-stat-title"> <%= 44 %> </div> 
             <div class="uppercase profile-stat-text"> Sites </div> 
            </div> 
            <div class="col-md-6 col-sm-6 col-xs-6"> 
             <div class="uppercase profile-stat-title"><%= 49 %> </div> 
             <div class="uppercase profile-stat-text"> Documents </div> 
            </div> 

           </div> 
           <!-- END STAT --> 
           <div> 


            <div class="margin-top-20 profile-desc-link"> 
             <i class="fa fa-map-marker"></i> 
             <span class="profile-desc-text" ><%= client.adress %></span> 
            </div> 
            <div class="margin-top-20 profile-desc-link"> 
             <i class="fa fa-envelope"></i> 
             <a href="#"><%= client.email %> </a> 
            </div> 

            <div class="margin-top-20 profile-desc-link"> 
             <i class="fa fa-globe"></i> 
             <a href="#"><%= client.website %></a> 
            </div> 
           </div> 
          </div> 
          <!-- END PORTLET MAIN --> 
         </div> 
         <!-- END BEGIN PROFILE SIDEBAR --> 
         <!-- BEGIN PROFILE CONTENT --> 
         <div class="profile-content"> 
          <div class="row"> 
           <div class="col-md-12"> 
            <div class="portlet light "> 
             <div class="portlet-title tabbable-line"> 
              <div class="caption caption-md"> 
               <i class="icon-globe theme-font hide"></i> 
               <span class="caption-subject font-blue-madison bold uppercase">Client N° <strong> <%= client.id %></strong></span> 
              </div> 
              <ul class="nav nav-tabs"> 
               <li class="active"> 
                <a href="#tab_1_1" data-toggle="tab">informations</a> 
               </li> 
               <li> 
                <a href="#tab_1_2" data-toggle="tab">Documents</a> 
               </li> 
               <li> 
                <a href="#tab_1_3" data-toggle="tab">Sites</a> 
               </li> 

              </ul> 
             </div> 
             <div class="portlet-body"> 
              <div class="tab-content"> 
               <!-- PERSONAL INFO TAB --> 
               <div class="tab-pane active" id="tab_1_1"> 
                 <form class="form-horizontal" role="form" action="edit"> 
                 <div class="form-actions"> 
                  <div class="row"> 
                   <div class="col-md-12"> 
                    <div class="row"> 
                   <div class="col-md-offset-10 col-md-2"> 
                    <input type="text" hidden name="id" value="<%=client.id%>"> 
                    <button type="submit" class="btn green"> 
                     <i class="fa fa-pencil"></i> Modifier</button> 

                   </div> 
                  </div> 
                 </div> 

                </div> 
               </div> 
               <div class="form-body"> 
                 <h3 class="form-section">Informations Personneles </h3> 

                <div class="row"> 
                 <div class="col-md-6"> 
                  <div class="form-group"> 

                   <label class="control-label col-md-4">ID :</label> 
                   <div class="col-md-8"> 
                    <strong> <p class="form-control-static"> <%= client.id %> </p></strong> 
                   </div> 
                  </div> 
                 </div> 
                 <!--/span--> 
                 <div class="col-md-6"> 
                  <div class="form-group"> 
                   <label class="control-label col-md-4">Nom :</label> 
                   <div class="col-md-8"> 
                   <strong> <p class="form-control-static"> <%= client.name %> </p></strong> </strong> 
                   </div> 
                  </div> 
                 </div> 
                 <!--/span--> 
                </div> 
                <!--/row--> 
                <div class="row"> 
                 <div class="col-md-6"> 
                  <div class="form-group"> 
                   <label class="control-label col-md-4">Responsable :</label> 
                   <div class="col-md-8"> 
                    <strong> <p class="form-control-static"><%= client.responsable %></p></strong> 
                   </div> 
                  </div> 
                 </div> 
                 <!--/span--> 
                 <div class="col-md-6"> 
                  <div class="form-group"> 
                   <label class="control-label col-md-4">Email :</label> 
                   <div class="col-md-8"> 
                   <strong> <p class="form-control-static"> <%= client.email %> </p></strong> 
                   </div> 
                  </div> 
                 </div> 
                 <!--/span--> 
                </div> 
                <!--/row--> 
                <div class="row"> 
                 <div class="col-md-6"> 
                  <div class="form-group"> 
                   <label class="control-label col-md-4">Téléphone :</label> 
                   <div class="col-md-8"> 
                    <strong> <p class="form-control-static"> <%= client.telephone %> </p></strong> 
                   </div> 
                  </div> 
                 </div> 
                 <!--/span--> 
                 <div class="col-md-6"> 
                  <div class="form-group"> 
                   <label class="control-label col-md-4">Fax :</label> 
                   <div class="col-md-8"> 
                    <strong> <p class="form-control-static"> <%= client.fax %> </p></strong> 
                   </div> 
                  </div> 
                 </div> 
                 <!--/span--> 
                </div> 
                <!--/row--> 
                <h3 class="form-section">Adresse</h3> 
                <div class="row"> 
                 <div class="col-md-12"> 
                  <div class="form-group"> 
                   <label class="control-label col-md-3">#</label> 
                   <div class="col-md-9"> 
                    <strong> <p class="form-control-static"> <%= client.adress %> </p></strong> 
                   </div> 
                  </div> 
                 </div> 
                </div> 
                <div class="row"> 
                 <div class="col-md-6"> 
                  <div class="form-group"> 
                   <label class="control-label col-md-4">Ville:</label> 
                   <div class="col-md-8"> 
                   <strong> <p class="form-control-static"> <%= client.town %> </p></strong> 
                   </div> 
                  </div> 
                 </div> 
                 <!--/span--> 

                  <div class="col-md-6"> 
                  <div class="form-group"> 
                   <label class="control-label col-md-6">Code postal:</label> 
                   <div class="col-md-6"> 
                    <strong> <p class="form-control-static"> <%= client.postalCode %></p></strong> 
                   </div> 
                  </div> 
                 </div> 

                 <!--/span--> 
                </div> 
                <!--/row--> 

               </div> 

              </form> 
               </div> 
               <!-- END PERSONAL INFO TAB --> 
               <!-- CHANGE AVATAR TAB --> 
               <div class="tab-pane" id="tab_1_2"> 
                <div class="form-actions"> 
                <div class="row"> 
                 <div class="col-md-12"> 
                  <div class="row"> 
                   <div class="col-md-offset-9 col-md-3"> 
                    <button type="submit" class="btn green" data-toggle="modal" href="#basic"> 
                     <i class="fa fa-plus"></i> Ajouter un doc </button> 

                   </div> 
                  </div> 
                 </div> 

                </div> 
               </div> 
                <!--- doc model --> 

                <div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true"> 
                 <div class="modal-dialog"> 
                  <div class="modal-content"> 
                   <div class="modal-header"> 
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> 
                    <h4 class="modal-title">Ajouter un Document</h4> 
                    </div> 
                     <div class="modal-body"> 
                     <form action="/client/addDocument" method="POST" enctype="multipart/form-data"> 
                     <input type="text" hidden name="id" value="<%= client.id %>"> 
                     <div class="form-group" style="padding-bottom: 22px;"> 
                      <label class="col-md-3 control-label">Titre</label> 
                      <div class="col-md-9"> 
                      <div class="input-group"> 
                      <span class="input-group-addon input-circle-left"> 
                       <i class="fa fa-info-circle"></i> 
                       </span> 
                      <input type="text" class="form-control input-circle-right" placeholder="titre du document" name="title"> </div> 
                     </div> 
                    </div> 
                    <br> 
                      <div class="form-group" style="padding-bottom: 22px;"> 
                      <label class="col-md-3 control-label">Description</label> 
                      <div class="col-md-9"> 
                      <div class="input-group"> 
                      <span class="input-group-addon input-circle-left"> 
                       <i class="fa fa-info-circle"></i> 
                       </span> 
                      <textarea type="text" class="form-control input-circle-right" name="description" placeholder="description du document"> </textarea> 
                      </div> 
                     </div> 
                    </div> 

                    <div class="form-group" style="padding-bottom: 22px; padding-top: 40px;"> 
                      <label class="col-md-3 control-label">Document</label> 
                      <div class="col-md-9"> 
                      <div class="input-group"> 
                      <div class="fileinput fileinput-new" data-provides="fileinput"> 
                     <span class="btn green btn-file"> 
                      <span class="fileinput-new"> Selectionner Fichier </span> 
                      <span class="fileinput-exists"> Changer </span> 
                      <input type="file" name="fichier"> </span> 
                      <span class="fileinput-filename"> </span> &nbsp; 
                      <a href="javascript:;" class="close fileinput-exists" data-dismiss="fileinput"> </a> 
                    </div> 
                      </div> 
                     </div> 
                    </div> 


                     </div> 
                    <div class="modal-footer"> 
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fermer</button> 
                    <button type="submit" class="btn green">Enregistrer</button> 
                    </form> 
                   </div> 
                  </div> 
             <!-- /.modal-content --> 
                 </div> 
            <!-- /.modal-dialog --> 
                </div> 
                <!-- fin doc model --> 


               <br> 
                <div class="portlet light bordered"> 
                 <div class="portlet-title"> 
                  <div class="caption font-green"> 
                    <i class=" fa fa-file font-green"></i> 
                     <span class="caption-subject bold uppercase" style="margin-right : 11px;">Liste des Documents</span> 

                  </div> 

                  </div> 
               <div class="portlet-body"> 
               <table class="table table-striped table-bordered table-hover dt-responsive" width="100%" id="sample_1"> 

            <thead> 
             <tr> 
              <th class="all">#</th> 
              <th class="min-tablet">Titre</th> 
              <th class="desktop">Description</th> 
             <th class="all" style="width : 66px">Action.</th> 
             </tr> 
            </thead> 
            <tbody> 
             <% _.each(client.docs, function (doc) { %> 

             <tr> 
              <td ><%=doc.id%></td> 
              <td ><%= doc.title %></td> 
              <td ><%= doc.description %></td> 
             <center> <td> 
             <a href="#" title="telecharger" class="btn btn-circle btn-icon-only green" ><i class="fa fa-download" ></i></a> 
             <a href="#" title="Supprimer" class="btn btn-circle btn-icon-only purple-sharp" data-toggle="confirmation" data-placement="left" data-btn-ok-label="Continuer" data-btn-ok-icon="icon-like" data-btn-ok-class="btn-success" data-btn-cancel-label="Annuler!" 
           data-btn-cancel-icon="icon-close" data-btn-cancel-class="btn-danger"><i class="fa fa-trash-o"></i></a> 
           </td></center> 

             </tr> 

             <% }) %> 
            </tbody> 
           </table> 
          </div> 
         </div> 
               </div> 

答えて

0

を見て、問題は非同期関数である

client.save() 

に存在します。

問題がクライアントを変更していて、変更を保存してロゴをアップロードしてデータをリロードするのを待っていないということです。

ここにはthe official docがあります。これは、model.saveにコールバックがあることを示しています。

client.save(function(){ 
    /*your code */ 
}) 
+0

ありがとう!それは働いている –

0

ビュー、それらのEJS機能が何を期待されているものをやっていると。あなたは、魔法のようにオンザフライでデータを変更する何らかの方法を提供しているわけではありません。代わりに、EJSとコントローラが実行しているのは、Get all data needed - with findOne - >Put that data on the view - with EJS and <% %> markers - >Render and serve a static HTML document - res.viewです。

オンザフライでデータを変更する必要がある場合は、VuejsやAngular ...のようなフロントエンドでより強力なフレームワークが必要です。EJSは静的ページを動的データONCEで組み立てることを目的としています。実際にあなたのコード次のドキュメントenter link description here