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

时间:2015-02-06 04:45:14

标签: javascript html mongodb meteor

我正在Meteor.js为医院制作一个学校项目 - 应用程序的原型在http://lrh.meteor.com。在表格中的查看医生部分,我想双击记录并能够编辑Nameemail id,但除此之外,我还希望在{{{ 1}}集合。有关如何实现此功能的任何想法?

1 个答案:

答案 0 :(得分:5)

我认为这可以帮助你。

让我们创建这个帮手。

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>标记,当您在dobleClick标记上<span>时,我们将会话设置为true,<span>标记为离开,新的<input>会显示一个新按钮,然后我们从<input>获取值,并将($set)更新为集合,并完成。

注意:这是来自Simple Crud app in Meteor from Raj Anand的小型回购,但博客上的代码是咖啡,我不会使用咖啡脚本。