Ractive.js flip boolean function

Question

Я новичок в Javascript (запущен сегодня), и я использую Ractive framework, чтобы сделать веб-приложение для доставки аналитического продукта. Я пытаюсь сделать функцию, которая переворачивает логическое значение в .on-функции. У меня есть что-то вроде этого, но оно не работает. Может ли кто-нибудь помочь мне в том, как думать об этой проблеме?

ractive.on('flipBool', function () { 
    ractive.set('theData.*.Visible', !'theData.*.Visible'); 
}); 

Answer 1

Следуя ответу от ofrommel, я подумал, что быстро объясню, что происходит в исходном фрагменте кода, поскольку это может быть полезно в будущем.

При вызове ractive.set('theData.*.Visible', !'theData.*.Visible'), вы устанавливаете все, что соответствует theData.*.Visible одному значению, которое !'theData.*.Visible - и потому, что оператор ! просто сводит на нет все, что следует за ним, и непустая строка считается truthy, !'theData.*.Visible' === false. Так что это эквивалент делать это:

ractive.set('theData.*.Visible', false); 

Таким образом, вместо того, чтобы использовать ключевой путь во втором аргументе, то есть на самом деле получить значение ключевого ресурса:

// this... 
ractive.toggle('foo'); 

// ...is equivalent to this: 
ractive.set('foo', !ractive.get('foo')); 

К сожалению, это фактически не работает с ключевыми дорожками, которые содержат символ *:

// this... 
ractive.toggle('theData.*.Visible'); 

// ...is equivalent to this... 
ractive.set('theData.*.Visible', !ractive.get('theData.*.Visible')); 

// ...which is equivalent to this: 
ractive.set('theData.*.Visible', true); 

Поскольку ractive.get('theData.*.Visible') всегда undefined, что означает, что переключая значение всегда будет устанавливать все соответствующие keypaths к true, который не то, что вы хотите. (. Я just opened an issue on GitHub для решения этой проблемы)

Так что лучший способ добиться того, что вы хотите, в настоящее время, является перебирать массив и обновлять все вручную, например, так:

ractive = new Ractive({ 
 
    el: 'main', 
 
    template: '#template', 
 
    data: { 
 
    people: [ 
 
     { name: 'Alice', visible: false }, 
 
     { name: 'Bob', visible: true }, 
 
     { name: 'Caroline', visible: true }, 
 
     { name: 'Dave', visible: false }, 
 
     { name: 'Eric', visible: false } 
 
    ] 
 
    }, 
 
    flipBool: function() { 
 
    var changes = {}; 
 
    this.get('people').forEach(function (person, i) { 
 
     changes[ 'people.' + i + '.visible' ] = !person.visible; 
 
    }); 
 
    this.set(changes); 
 
    } 
 
});

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script> 
 

 
<main></main> 
 

 
<script id='template' type='text/html'> 
 
    <button on-click='flipBool()'>flip</button> 
 
    
 
    {{#each people}} 
 
    {{#if visible}} 
 
     <p>{{name}} is visible</p> 
 
    {{/if}} 
 
    {{/each}} 
 
</script>

Answer 2

Почему бы не использовать функцию Ractive toggle()?