双击以编辑Meteor应用程序中的元素

Double click to edit element in Meteor app

本文关键字：元素 应用程序 Meteor 编辑 双击      更新时间：2023-09-26

我正在Meteor.js为一家医院做一个学校项目——该应用程序的原型已经上线http://lrh.meteor.com。在表中的"查看医生"部分，我想双击记录并能够编辑Name和email id，但同时我也想更新MongoDB集合中的记录。关于如何实现此功能，有什么想法吗？

我认为这可以帮助你。

让我们创建这个辅助对象。

Template.example.helpers({
   'editValue' : function(){
    return Session.get("TargetValue" + this._id);
  }
})

这两件事。

 Template.example.events({
      'dbclick #spanIdOnDom' : function(e,t){
      return Session.set("TargetValue" + t.data._id,true)//hide the span and we set the input 
     },
   'click #buttonToSaveNewValue': function(e, t) { 
     //here you can take the emailId and the name based on this._id like this Collection.find({_id:this._id}).fetch(); and do the updates you want to do
     var newValueFromInput = document.getElementById('newValueFromInput').value;
       var idCurrentDocument = this._id;
       var Bebida = Collection.findOne(t.data._id);
       Collection.update({_id: idCurrentDocument}, {$set:{fieldToUpdate:   newValueFromInput}});
       return Session.set("TargetValue" + t.data._id,false); //we hide the input and we put the span again
      }
    })

HTML

 <template name="example">
    {{#each collectionFind}}
        {{#if editValue}}
            <input type="text" id="newValueFromInput"  value="{{currentValue}} " />
            <button class="btn btn-sm btn-primary" id="buttonToSaveNewValue" type="submit">Save new Value</button>
          {{else}}
               <td>
            <p>
              <span class="content col-md-10" id="spanIdOnDom" ><h4>Descripcion Bebida:</h4><br>{{currentValue}} </span>
            </p>
              </td> 
            {{/if}} 
    {{/each}}
  </template>

当然，您需要设置Allow/deny权限和publish/subscribe方法，以使其工作效率更高。

它是如何工作的

在简历中，您有一个具有当前值的<span>标记，当您在<span>标记上dobleClick时，我们将Session设置为true，<span>标记消失，出现一个带有新按钮的新<input>，然后我们从<input>获取值，她将($set)更新到集合中，并完成此操作。

注意：这是Raj Anand的Meteor中Simple Crud应用程序的迷你回购，但博客上的代码是关于咖啡的，我不使用咖啡脚本。

相关文章：