使用軟件包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