如何在Meteor和DRY中实现可编辑文本?
我已经想出了一种方法,在我的Meteor应用程序中制作可编辑文本。然而,它并没有遵循DRY范式,我想改变这一点,但我还不太擅长Javascript 假设我有一个包含一些文本的表格单元格,我想双击它来编辑它。我创建了一个模板变量来处理此问题:如何在Meteor和DRY中实现可编辑文本?,meteor,dry,Meteor,Dry,我已经想出了一种方法,在我的Meteor应用程序中制作可编辑文本。然而,它并没有遵循DRY范式,我想改变这一点,但我还不太擅长Javascript 假设我有一个包含一些文本的表格单元格,我想双击它来编辑它。我创建了一个模板变量来处理此问题: <td class="itemName"> {{#unless editItemName}} {{name}} {{else}} <input class="editItemName" ty
<td class="itemName">
{{#unless editItemName}}
{{name}}
{{else}}
<input class="editItemName" type="text" value="{{name}}" style="width:100px;">
{{/unless}}
</td>
我还重用了ToDo示例应用程序中的ok_cancel代码(但这有点不相关):
最后,我必须将此会话变量绑定到模板变量:
Template.inventoryItemDetail.editItemName = function () {
return Session.get("editItemName");
};
现在,我对每个可编辑的文本字段重复了一遍又一遍,一切都正常了,但这看起来像是可怕的编程实践。我在Github上发现了各种可编辑文本实用程序,但我并不完全理解它们,而且它们都不是Meteor的
我真的很想通过创建一个工具来扩展我对Meteor和Javascript的知识,该工具允许我拥有可编辑文本,而不必为每个可编辑文本字段重复这么多荒谬的内容
谢谢
为包选择Chet
对于文档
我刚刚在我的项目中实现了这一点,我再也不会回到
contenteditable
我环顾四周时看到了这一点。我不太明白。1) 什么是可编辑的内容?2) 我将如何使用这个包来完成我正在做的事情——编辑数据库属性等。?
// 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}});
}
});
Template.inventoryItemDetail.editItemName = function () {
return Session.get("editItemName");
};