javascript - 使用 Meteor session 切换模板

Question

我是 JavaScript 和 Meteor 的新手，在尝试为列表项创建编辑功能以便能够修改列表项的属性(来自 Mongo 文档)时有点卡住了。如果我将 editMode 设置为项目本身的 bool 属性，我可以让它工作，但我希望它是本地的和临时的，而不是与文档本身一起存储。

看看下面的代码，你会发现我还是一头雾水，还没有完全理解我在做什么，但你应该能够理解我想做什么:)

代码有点在那里，但我试图根据切换编辑按钮来连接 session 中的更改，以获取要呈现的编辑模式模板。这是我所拥有的(精简为相关内容):

// Item template

<template name="item">
  <div class="item">
    <span>{{itemText}}</span>
    <span class="glyphicon glyphicon-pencil item-edit" aria-hidden="true"></span>
  </div>
  <div class="mod-table">
    {{#if this.editMode}}
      {{> modTable}}
    {{/if}}
  </div>
</template>

// Associated .js file

Session.set(this.editMode, false);

Template.item.events({
  'click .item-edit': function() {
    if (this.editMode) {
      Session.set(this.editMode, false);
    } else {
      Session.set(this.editMode, true);
    }
  }
});

Answer 1

不要使用 Session 变量，因为它们是全局变量，因此被认为是不好的做法，您应该使用绑定(bind)到项目模板的 ReactiveVar。

项目.html :

<template name="item">
  <div class="item">
    <span>{{itemText}}</span>
    <span class="glyphicon glyphicon-pencil item-edit" aria-hidden="true"></span>
  </div>
  <div class="mod-table">
    {{#if editMode}}
      {{> modTable}}
    {{/if}}
  </div>
</template>

项目.js :

Template.item.created=function(){
  this.editMode=new ReactiveVar(false);
};

Template.item.helpers({
  editMode:function(){
    return Template.instance().editMode.get();
  }
});

Template.item.events({
  'click .item-edit': function(event,template) {
    var editMode=template.editMode.get();
    template.editMode.set(!editMode);
  }
});

不要忘记meteor add reactive-var到你的项目中!