Как сделать кнопку с 2 условиями? - PullRequest
Новая
       1

Как сделать кнопку с 2 условиями?

0 голосов
/ 27 января 2020

Я младший разработчик в js и изучаю веб-платформу Meteor. Я сомневаюсь, как сделать кнопку, чтобы изменить состояние между истинным и ложным (логическим) в одном компоненте документа в базе данных.

Например, у меня есть такой документ: [{name: 'Name', фамилия: 'Surname', active: 'true'}]. Мне нужно иметь возможность изменить активное состояние с истинного на ложное и наоборот, используя пользовательский интерфейс в моем приложении.

Спасибо за любую помощь!

Ответы [ 2 ]

0 голосов
/ 30 января 2020

Для этого вам необходимо обновить документ в базе данных. Хорошей практикой является выполнение обновлений на стороне сервера, а в 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, чтобы мы могли видеть, над чем вы работаете, и помочь вам в дальнейших приключениях в веб-разработке.

0 голосов
/ 27 января 2020

Может, вот так? 

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