在不使用 Session 的情况下就地编辑 Meteor 视图

Question

我想包含一个模板（或使用助手，我不在乎），可以点击该模板进行就地编辑。此视图必须是可重用的，因此不能依赖 Session 变量或视图实例不包含的任何其他变量。

在显示模式下它看起来像这样：

<div class="editable">{{content}}</div>

当你点击它时会变成编辑模式，看起来像这样：

<input type="text" value="{{content}}" />

您可以通过按回车键或按下按钮恢复到显示模式（适当地保持其更改）。

自从我第一次尝试使用 html 以来，似乎流星并没有让这变得非常容易：

<template name="editable">
    {{#if editing}}
        <input type="text" value={{this}} />
    {{else}}
        <div class="edit-thing">{{this}}</div>
    {{/if}}
</template>

// In the appropriate display template.
{{> editable stuff}}

和js：

Template.user.stuff = "yo yo yo";

Template.editable.events({
    'click .edit-thing': function(e) {
        this.isEditing = true;
    }
});

Template.editable.helpers({
    editing: function() {
        return !!this.isEditing;
    }
});

遇到了不响应式的问题，使用 Deps 库并没有解决这个问题。 （当您单击此版本时，它不会更改，因为 this.isEditing 不是响应式的，并且不会触发 editing 帮助程序的更改。）

如果您愿意，请询问更多信息！谢谢！

Answer 1

这是 Deps 的典型用例，您是否记得同时使用 depend 和 changed？ js代码可能是这样的：

Template.editable.created = function() {
    this.data.isEditing = false;
    this.data.isEditingDep = new Deps.Dependency();
};

Template.editable.events({

    '... whatever to start edit mode ...': function(e, t) {
        t.data.isEditing = true;
        t.data.isEditingDep.changed();
    },

    '... whatever to close edit mode ...': function(e, t) {
        t.data.isEditing = false;
        t.data.isEditingDep.changed();
    },
}); 

Template.editable.editing = function() {
    this.isEditingDep.depend();
    return this.isEditing;
};