Question

我是Javascript的新手（今天开始），我正在使用Ractive框架制作一个Web应用程序来提供分析产品。我试图创建一个在.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。所以这相当于这样做：

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

因此，不必在第二个参数中使用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>

Answer 2

为什么不使用Ractive toggle()函数？

Ractive.js翻转布尔函数

2 个答案: