updated app

node_modules/derby-examples/widgets/lib/app/ui/dropdown/index.html

@@ -0,0 +1,17 @@
+<dropdown:>
+  <!-- a :self path alias is automatically created per component -->
+  <div class="btn-group {#if :self.open}open{/}">
+    <!-- x-as can be used to pass a reference to an element to the script -->
+    <a x-as="toggle" x-bind="click: clickToggle" class="btn dropdown-toggle">
+      {{{value}}} <span class="caret"></span>
+    </a>
+    <menu x-as="menu" x-bind="click: clickMenu" class="dropdown-menu">
+      {{{#each items}}}
+        {{#if divider}}
+          <li class="divider"></li>
+        {{else}}
+          <li><a>{{text}}</a></li>
+        {{/}}
+      {{{/}}}
+    </menu>
+  </div>

node_modules/derby-examples/widgets/lib/app/ui/dropdown/index.js

@@ -0,0 +1,35 @@
+// self is a scoped model underneath _$component.{uid}
+
+// Components must export a create function, which only runs
+// in the browser
+exports.create = function(model, self, dom, elements) {
+  var toggle = elements.toggle
+    , menu = elements.menu
+    , open = self.at('open')
+
+  // Listeners added inside of a component are removed when the
+  // page is re-rendered client side
+  dom.addListener(document.documentElement, 'click', function(e) {
+    if (e.target === toggle || menu.contains(e.target)) return
+    open.set(false)
+  })
+
+  exports.clickToggle = function() {
+    open.set(!open.get())
+  }
+
+  exports.clickMenu = function(e) {
+    var item = model.at(e.target)
+      , value = item.get().text
+    open.set(false)
+    if (value != null) {
+      self.set('value', value)
+    }
+  }
+}
+
+// Components may export an init function, which runs on both
+// the server and browser before rendering
+exports.init = function(model, self) {
+  self.setNull('value', self.get('items.0.text'))
+}