如何制作具有2个条件的按钮？

Question

我是 js 的初级开发人员，正在学习网络平台 Meteor。我怀疑如何使按钮在数据库中文档的一个组件中改变 true 和 false（布尔值）之间的状态。

比如我有这样的文档：[{ name: 'Name', surname: 'Surname', active: 'true' }]。我需要能够在我的应用程序中使用 UI 将活动条件从 true 更改为 false，反之亦然。

感谢您的帮助！

Answer 1

也许像这样？

let doc = [{ name: 'Name', surname: 'Surname', active: 'true' }];

document.querySelector('#btn-toggle').addEventListener('click', () => {
  doc[0].active === 'true' ? doc[0].active = 'false' : doc[0].active = 'true';
  console.log(doc)
});

<button id='btn-toggle'>Toggle 'active'</button>

顺便说一句，我会在对象中使用真布尔值，而不是字符串：

let doc = [{ name: 'Name', surname: 'Surname', active: true }];

let doc = [{ name: 'Name', surname: 'Surname', active: true }];

document.querySelector('#btn-toggle').addEventListener('click', () => {
  doc[0].active = !doc[0].active;
  console.log(doc)
});

<button id='btn-toggle'>Toggle 'active'</button>

Answer 2

为此，您需要更新数据库中的文档。一个好的做法是在服务器端执行更新，在 Meteor 中，这是通过 Meteor.methods() 完成的。

在服务器启动时创建用户的同一个文件中，您将添加一些如下所示的代码：

Meteor.methods({
   'toggleActiveStateUser'(userId) {
       const user = User.findOne(userId);
       if (!user) {
           return;
       }
       User.update({_id: userId}, {$set: {'active': !user.active}});
   }
});

在您的客户端代码中，我们可以在触发按钮事件时通过以下运行访问此代码。

Meteor.call('toggleActiveStateUser', userId, function(err, result) {console.log(err, result); });

如果您使用的是 Blaze 模板，您可以通过以下方式访问按钮模板：

Template.yourTemplateName.events({
   'click #btn-toggle': function (event, template) {
       console.log('Click event working!');
       const user = Template.instance().data
       // run the Meteor.call function in here.
   }
});

如果您需要进一步的帮助，您必须将您的代码放在 github 上，这样我们才能看到您在做什么，并帮助您进一步探索 Web 开发。

如何制作具有2个条件的按钮？

How to make a button with 2 conditions?

html

javascript

mongodb

meteor

reactjs