DOM DSL Example #1

gistfile1.js

  template() {
    return [
      div => [
        header => [
          h1 => ["Example " + this.title]
        ]
      ],
      div => ["#main",
        $if => [this.todos.length > 0,
          div => [
            span => [".counter", "There are " + this.todos.length + " todos!"]
          ]
        ],
        ul => [".todos",
          $forEach => [this.todos, (todo, index) =>
            li => ['.todo',
              h2 => ["A todo!"],
              span => [index + ": " + todo]
            ]
          ]
        ],
        form => [{id: this.formId, method: "post", action: "#"},
          div => [".form-control",
            input => [{name: "first_name", type: "text"}]
          ],
          button => [{type: "submit", onClick: this.click},
            "Submit!"
          ]
        ]
      ]
    ]
  }