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

Question

我正在Meteor.js为医院做一个学校项目- 应用程序的原型在http://lrh.meteor.com上.在表格的视图医生部分,我想双击记录并能够编辑Name和email id,但与此同时我还想在MongoDB集合中更新记录.有关如何实现此功能的任何想法？

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/denyPermission和publish/subscribe方法以使其更有效.

这个怎么运作？

在简历中你有一个<span>带有当前值dobleClick的<span>标签,当你在标签上时,我们将Session设置为true,<span>标签消失,<input>然后出现一个带有新按钮的新标签然后我们从中获取值<input>并将其更新($set)到集合中,并完成了.

注意:这是来自Raj Anand的Meteor中Simple Crud应用程序的迷你回购,但博客上的代码是咖啡,我不使用咖啡脚本.