不使用会话就地编辑流星视图

blaineh 发表于 Dev

布莱尼

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

在显示模式下，它将如下所示：

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

当您单击它时，它将更改为编辑模式，如下所示：

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

并且您可以通过按Enter或按一个按钮来返回显示模式（坚持对其进行适当的更改）。

自从我第一次尝试使用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帮助程序中的更改。）

如果需要，请索取更多信息！谢谢！

休伯特·奥格

那是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;
};