javascript - Ractive.js翻转 bool 函数

我是Java语言的新手（从今天开始），我正在使用Ractive框架制作一个Web应用程序来交付分析产品。我正在尝试制作一个在.on函数中翻转布尔值的函数。我有这样的东西，但它不起作用。有人可以帮我解决这个问题吗？

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

最佳答案

在ofrommel的回答之后，我想我会迅速解释一下初始代码段中发生的事情，因为这可能对将来有所帮助。

调用ractive.set('theData.*.Visible', !'theData.*.Visible')时，会将与theData.*.Visible匹配的所有内容都设置为单个值，即!'theData.*.Visible-并且由于!运算符只是对它后面的内容求反，并且非空字符串被认为是真实的。 ，!'theData.*.Visible' === false。因此，这等效于执行此操作：

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

因此，您不必实际在第二个参数中使用keypath，而必须获取keypath的值：

// 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，这意味着切换值将始终将所有匹配的键路径设置为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>