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

Question

我正在 Meteor.js 为医院制作一个学校项目 - 应用程序的原型已在 http://lrh.meteor.com 上发布。在 table 的查看医生部分，我想双击记录并能够编辑 Name 和 email id，但同时我也想更新记录在 MongoDB collection。关于如何实现此功能的任何想法？

Answer 1

我想这对你有帮助。

让我们创建这个助手。

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

还有这 2 个事件。

 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) 更新到集合中，然后就完成了。

注意： 这是来自 Simple Crud app in Meteor from Raj Anand 的一个小型仓库，但是博客上的代码是在 coffee 上的，我不使用 coffee 脚本。

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

Double click to edit element in Meteor app

html

javascript

mongodb

meteor