title: Bound variable not updating in function in Nativescript (JavaScript)
body: <h2>Context</h2>
  
  <p>I have a page where a <code>listview</code> can be toggled visible/hidden using a function called when tapping a button.</p>
  
  <p>The <code>listview</code> element has the <code>visibility</code> attribute set to</p>
  
  <pre><code>{{ showFixtures ? 'visible' : 'collapsed' }}
  </code></pre>
  
  <p>When I initially bind the page, the <code>showFixtures</code> variable is set to <code>false</code> and the <code>listview</code> is hidden. When reversed, the <code>listview</code> is shown. This proves that the <code>showFixtures</code> variable is initially bound.</p>
  
  <p>When the button is tapped, the <code>showFixtures</code> variable is supposed to be toggled between <code>true</code> and <code>false</code>. I can tap the button and call the function and see that the page variables have changed, however the <code>listview</code> element does not become visible/hidden (depending on context).</p>
  
  <h2>Code</h2>
  
  <p><em><code>page.xml</code></em></p>
  
  <pre><code>&lt;Page loaded="loaded"&gt;
      &lt;!-- ... --&gt;
  &lt;Label text="Toggle Fixtures" ontap="toggleFixtures"  /&gt;
      &lt;ListView items="{{ fixturesList }}" visibility="{{ showFixtures ? 'visible' : 'collapsed' }}"&gt;
          &lt;ListView.item&gt;
              &lt;GridLayout class="list-matches-ko" rows="30" columns="auto,*"&gt;
                  &lt;Label row="0" col="0" class="list-matches-ko-date" text="{{ koLabelDate }}" /&gt;
                  &lt;Label row="0" col="1" class="list-matches-ko-time" text="{{ koLabelTime }}" /&gt;
              &lt;/GridLayout&gt;
          &lt;/ListView.item&gt;
      &lt;/ListView&gt;
      &lt;!-- ... --&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p><em><code>page.js</code></em></p>
  
  <pre><code>var observableModule = require("data/observable");
  var pageData = new observableModule.Observable;
  
  exports.loaded = loaded;
  function loaded(args){
      page = args.object;
      pageData.showFixtures = false;
      page.bindingContext = pageData;
  }
  
  //...
  
  exports.toggleFixtures = toggleFixtures;
  function toggleFixtures(args){
      pageData.showFixtures = pageData.showFixtures ? false : true;
      console.log(args.object.bindingContext.showFixtures);
      console.log(page.bindingContext.showFixtures);
      console.log(pageData.showFixtures);
  }
  </code></pre>
  
  <h2>Output</h2>
  
  <p>When the button is tapped three times, the output on the console is:</p>
  
  <pre><code>JS: true
  JS: true
  JS: true
  JS: false
  JS: false
  JS: false
  JS: true
  JS: true
  JS: true
  </code></pre>
  
  <h2>Question</h2>
  
  <p>How can I make the <code>listView</code> element visible/hidden with this function by using the bound variable, and why isn't it working the way it is now?</p>