使用 Meteor 会话切换模板

Question

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

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

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

// 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 变量，因为它们是全局变量，因此被认为是不好的做法，您应该使用 ReactiveVar 绑定到您的项目模板。

item.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>

item.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 到您的项目！

使用 Meteor 会话切换模板

Using Meteor sessions to toggle templates

javascript

session

meteor