Question

我想要包含一个模板（或使用帮助器，我不在乎），可以点击进行编辑。此视图必须可重用，因此不能依赖于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助手的更改。）

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

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

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

1 个答案: