Your First Conditional Template with Dart Web Components

As if data binding and custom elements with Dart Web UI isn't enough, you can also conditionally render blocks of elements via simple declarative attributes! The conditionals are "live" and are re-evaluated when data changes, keeping your page dynamic and up-to-date.

(You may want to read Your First Model Driven View with Dart, which contains more information on getting started and configure the necessary tools. This post assumes you've read my previous posts on Web Components and Dart.)

Conditionals templates

With Dart Web UI, you can conditionally display elements. For example, you can declaratively say "If the checkbox is checked, then display the thank you notice." Here's an example:

In the above example, the <h2> and <p> will only be added to the DOM if the acceptLicense variable becomes true. If acceptLicense becomes false, the template contents are removed from the DOM.

A <template> is an inert set of elements, which is parsed but not activated and not immediately added to the DOM. To render the elements in a template, the conditional in the if must become true. You can use any Dart code that results in a boolean for the conditional.

Full example

Here is a complete Dart Web UI page with a conditional template. The below example also demonstrates data binding with a checkbox.

Use conditional templates with data binding to control the display of blocks of elements. Use a <template if="some_boolean_expression"> to conditionally render elements to a page. The conditional template is "live" and is re-evaluated when data changes.

Popular posts from this blog

Now, this has to have a built-in somewhere in Scala , because it just seems too common. So, how to convert an Array to a List in Scala? Why do I need this? I needed to drop to Java for some functionality, which in this case returns an Array. I wanted to get that Array into a List to practice my functional programming skillz. **Update**: I figured out how to convert Arrays to Lists the Scala way. Turns out it's a piece of cake. val myList = List.fromArray(Array("one", "two", "three")) or val myList = Array("one","two","three").elements.toList The call to elements returns an Iterator , and from there you can convert to a List via toList . Nice. Because my first version wasn't actually tail recursive, what follows is a true tail recursive solution, if I were to implement this by hand. The above, built in mechanism is much better, though. object ArrayUtil { def toList[a](array: Array[a]): List[a] = { d

In which I port a snazzy little JavaScript audio web app to Dart , discover a bug, and high-five type annotations. Here's what I learned. [As it says in the header of this blog, I'm a seasoned Dart developer. However, I certainly don't write Dart every day (I wish!). Don't interpret this post as "Hi, I'm new to Dart". Instead, interpret this post as "I'm applying what I've been documenting."] This post analyzes two versions of the same app, both the original (JavaScript) version and the Dart version. The original version is a proxy for any small JavaScript app, there's nothing particularly special about the original version, which is why it made for a good example. This post discusses the differences between the two implementations: file organization, dependencies and modules, shims, classes, type annotations, event handling, calling multiple methods, asynchronous programming, animation, and interop with JavaScript libraries. F

In which the virtues of automated mechanical arboreal pruning are extolled over quaint manual labor, as applied to web development build processes. The setup Ever notice how the primary bit of marketing for many traditional web programming libraries is their download size? Why is that? Check this out: Why does size matter so much for these libraries? Your first instinct is probably, "because the more bytes you shuttle across the wire, the slower the app starts up." Yes, this is true. I'd also say you're wrong. The primary reason that size matters for these libraries is because traditional web development has no intelligent or automated way to prune unused code so you can ship only the code that is used over the wire. The web is full of links, yet web dev has no linker The web development workflow is missing a linking step. A linker's job is to combine distinct project files into a single executable. A smart linker will only incl