Ractive.js flip 부울 함수

Question

저는 (현재 시작된) Javascript에 익숙하지 않으며 Ractive 프레임 워크를 사용하여 분석 제품을 제공하는 웹 앱을 만들고 있습니다. .on 함수에서 부울 값을 대치하는 함수를 만들려고합니다. 나는 이와 같은 것을 가지고 있지만 작동하지 않습니다. 누군가가이 문제에 대해 어떻게 생각하는지에 관해 나를 도울 수 있습니까?

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

Answer 1

ofrommel의 답변에 이어, 장래에 도움이 될 수있는 초기 코드 스 니펫에서 진행되는 작업을 신속하게 설명 할 수 있다고 생각했습니다.

당신이 ractive.set('theData.*.Visible', !'theData.*.Visible') 호출 할 때, 당신은 !'theData.*.Visible 단일 값으로 theData.*.Visible 일치하는 모든 설정하는 -과를 ! 운영자는 간단하게 다음과 어떤 부정하고, 비어 있지 않은 문자열, !'theData.*.Visible' === false이 truthy 간주되기 때문이다. 그래서이이 일의 상당의 :

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

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

:

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

그래서 대신에 두 번째 인수에 키 패스를 사용하여, 당신은 실제로 키 패스의 값를 얻을 수 있습니다 아쉽게도 * 문자가 포함 된 키패드에서는 작동하지 않습니다.

(210)

// 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 때문에, 즉 값을 전환하는 것은 항상 당신이 원하는하지 않은, true에 일치하는 모든 keypaths을 설정된다는 것을 의미합니다. (. 나는이 문제를 해결하기 위해 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() 기능을 사용하지 않습니까?