使用软件包aslagle：使用X-editable的反应表

Question

我在我的应用程序中使用aslagle中的反应性表格软件包，我想创建内嵌编辑，我搜索了一下，发现有流星的x-editable软件包，所以我怎样才能使用aslagle：工作人员的反应表包：x-editable-reactive-template包？

我尝试这样做：

反应，表设置：

tableSettings: function() { 
     return { 
      collection: fLogCollection, 
      rowsPerPage: 10, 
      showFilter: true, 
      fields: [ 
      { key: 'name', label: 'Name'}, 
      { key: 'amount', 
       label: 'Amount', 
       tmpl: Template.xEditableAmount 
      }, 
      { key: 'cashFrom', label: 'Cash From'}, 
      { key: 'dateIs', label: 'Date', sortOrder: 0, sortDirection: 'descending'}, 
      { key: 'controls', label: 'Controls', fn: function() { 
       return new Spacebars.SafeString(
       "<button class='editFlog'><span class='glyphicon glyphicon-pencil'></span> </button>"+ 
       "<button class='delete'><span class='glyphicon glyphicon-remove'></span> </button>" 
       ); } }, 
      { key: 'createdAt', label: 'createdAt', hidden: true }, 
      ], 
     }; 
    }, 

xEditableAmount模板：

<template name="xEditableAmount"> 
     <a href="#" id="amount" data-type="text" class="editable" data-title="Enter the new amount">{{amount}}</a> 
</template> 

此代码来获取X编辑呈现：

Template.fLog.onRendered(function() { 
    this.$('.editable').editable({ 
     success: function (response, newValue) { 
     if(response.status == 'error') return response.msg; //msg will be shown in editable form 
     else Meteor.call('flog.edit2', this._id, newValue); 
     }, 
    }); 
}); 

我成功地使X-编辑渲染，但

我在获得与收集的新值更新领域的失败...

Answer 1

你可以注入模板到字段这使得它方便添加几乎任何你想要的。

模板帮手：

tableSettings: function() { 
    return { 
     collection: foo, 
     fields: [ 
      { 
       key: 'foo_1', 
       label: 'Foo 1', 
       tmpl: Template.foo1, 
      }, 
      { 
       key: 'foo_2', 
       label: 'Foo 2', 
       tmpl: Template.foo2, 
      }, 
      { 
       key: 'foo_2', 
       label: 'Foo 2', 
       tmpl: Template.foo2, 
      } 
     ] 
    }; 
} 

在foo2的帮手（直接从workman/x-editable-reactive-template atmosphere page复制）：

Template.foo2.helpers({ 
    onSuccess: function() { 
     var id = this._id; 
     return function (res, val) { 
      MyColl.update({ _id: id }, { $set: { prop: val } }); 
     } 
    } 
}); 

在您的模板：

<template name='table> 
    {{> reactiveTable settings=tableSettings}}` 
</template> 

<template name='foo1'> 
    <!-- Any html (below pasted from docs (link at bottom of post)--> 
    <a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a> 
</template> 

<template name='foo2'> 
    {{> xEditable type="text" success=onSuccess placement="right" }} <!-- put your workman:x-editable-reactive-template here --> 
</template> 

这应该让你在正确的指出方向。

https://vitalets.github.io/x-editable/docs.html