0

我想出了一种在我的 Meteor 应用程序中制作可编辑文本的方法。但是,它不遵循 DRY 范式,我想改变它,但我对 Javascript 还不太擅长......

假设我有一个包含一些文本的表格单元格,我想双击它来编辑它。我创建了一个模板变量来处理这个:

<td class="itemName">
    {{#unless editItemName}}
        {{name}} 
    {{else}}
        <input class="editItemName" type="text" value="{{name}}" style="width:100px;">
    {{/unless}}
</td>

然后我创建一个事件以在双击时执行此转换:

Template.inventoryItemDetail.events = {

'dblclick td.itemName': function (evt) {
  Session.set("editItemName",true);
},
'blur input.editItemName': function () {
  Session.set("editItemName",null);
},};

我还重用了 ToDo 示例应用程序中的 ok_cancel 代码(但这有点无关紧要):

  // Returns an event_map key for attaching "ok/cancel" events to
  // a text input (given by selector)
  var okcancel_events = function (selector) {
    return 'keyup '+selector+', keydown '+selector+', focusout '+selector;
  };

  // Creates an event handler for interpreting "escape", "return", and "blur"
  // on a text field and calling "ok" or "cancel" callbacks.
  var make_okcancel_handler = function (options) {
    var ok = options.ok || function () {};
    var cancel = options.cancel || function () {};

    return function (evt) {
      if (evt.type === "keydown" && evt.which === 27) {
        // escape = cancel
        cancel.call(this, evt);
        evt.currentTarget.blur();


      } else if (evt.type === "keyup" && evt.which === 13) {
        // blur/return/enter = ok/submit if non-empty
        var value = String(evt.target.value || "");
        if (value) {
          ok.call(this, value, evt);
          evt.currentTarget.blur();
        }
        else {
          cancel.call(this, evt);
          evt.currentTarget.blur();
        }
      }
    };
  };

Template.inventoryItemDetail.events[ okcancel_events('input.editItemName') ] = make_okcancel_handler({
ok: function (value) {
  Items.update(this._id, {$set: {name: value}});
}
});

最后,我必须将此 Session 变量绑定到模板变量:

Template.inventoryItemDetail.editItemName = function () {
  return Session.get("editItemName");
};

所以现在,我对每个可编辑的文本字段一次又一次地重复了所有这些,并且一切正常,但这似乎是一种非常糟糕的编程实践。我在 Github 上找到了各种可编辑的文本实用程序,但我并不完全理解它们,而且它们都不适合 Meteor!

我真的很想通过创建一个工具来扩展我对 Meteor 和 Javascript 的知识,该工具允许我拥有可编辑的文本,而不会为每个可编辑的文本字段重复这个荒谬的数量。

谢谢,

切特

4

1 回答 1

0

https://github.com/nate-strauser/meteor-x-editable-bootstrap包。

http://vitalets.github.io/x-editable/docs.html用于文档。

我刚刚在我的项目中实现了这一点,我永远不会回到contenteditable.

于 2013-08-08T02:29:39.703 回答