riotjs: object is not valid in show

<!doctype html>

<html>
  <head>
    <title>Riot todo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="todo.css">

    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script>html5.addElements('todo')</script>
    <![endif]-->

  </head>

  <body>

    <todo></todo>

    <script src="todo.tag" type="riot/tag"></script>
    <script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script>

    <script>
    riot.mount('todo', {
      title: 'I want to behave!',
      items: [
        { title: 'Avoid excessive caffeine', done: true },
        { title: 'Hidden item',  hidden: true },
        { title: 'Be less provocative'  },
        { title: 'Be nice to people' }
      ]
    })
    </script>

  </body>

</html>

# Todo App

This is a simple example with in-browser compilation.

## Have a play

[Open this example on Plunker](http://riotjs.com/examples/plunker/?app=todo-app)

## Run locally

Install superstatic if you don't have.

```bash
$ npm install -g superstatic
```

Download or clone this repo, then run the command.

```bash
$ cd to/this/dir
$ superstatic
```

Open the URL shown in your browser.


body {
  font-family: 'myriad pro', sans-serif;
  font-size: 20px;
  border: 0;
}

todo {
  display: block;
  max-width: 400px;
  margin: 5% auto;
}

form input {
  font-size: 85%;
  padding: .4em;
  border: 1px solid #ccc;
  border-radius: 2px;
}

button {
  background-color: #1FADC5;
  border: 1px solid rgba(0,0,0,.2);
  font-size: 75%;
  color: #fff;
  padding: .4em 1.2em;
  border-radius: 2em;
  cursor: pointer;
  margin: 0 .23em;
  outline: none;
}

button[disabled] {
  background-color: #ddd;
  color: #aaa;
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
  padding: .2em 0;
}

.completed {
  text-decoration: line-through;
  color: #ccc;
}

label {
  cursor: pointer;
}


<todo>
  
  <div each="{a}">
    <h3 show="{nd || bl}">test</h3>
  </div>
  
  <button onclick="{btn}">show</button>

  <!-- this script tag is optional -->
  <script>
    
    this.a = [1];
    this.bl = undefined;
    this.nd = undefined;
    
    var self = this;
    this.btn = function(){
      self.bl = false;
      self.nd = {a : 1};
    }
  </script>

</todo>