Question

我在我的应用程序中使用aslagle的反应表包，我想创建内联编辑，我搜索了一下，我发现Meteor有x-editable包，所以如何使用aslagle：reactive-table包与workman：x-editable-reactive-template包？

我试过了：

Reactive-Table设置：

  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-editable ：

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-editable渲染但

我无法使用集合中的新值更新字段...

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

使用package aslagle：reactive-table with X-editable

1 个答案: