title: Reorder li items according to a variable/condition
body: <p>I have a list as follows:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;First&lt;/li&gt;
    &lt;li&gt;Second&lt;/li&gt;
    &lt;li&gt;Third&lt;/li&gt;
    &lt;li&gt;Fourth&lt;/li&gt;
    &lt;li&gt;Fifth&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What I want is to order the list based on different conditions. For example if the variable <code>state == "foo"</code>, I want the <code>Fourth</code> <code>li</code> to appear first and the <code>Second</code> <code>li</code> to appear last like so:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Fourth&lt;/li&gt;
    &lt;li&gt;First&lt;/li&gt;
    &lt;li&gt;Third&lt;/li&gt;
    &lt;li&gt;Fifth&lt;/li&gt;
    &lt;li&gt;Second&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And if the <code>state == "bar"</code> I want the list to appear in some other way.</p>
  
  <p>Also consider that there may be future conditions where <code>state</code> may be equal to <code>"baz"</code> or <code>"foobar"</code> each having their own order. So writing custom conditionals for each state is not an option.</p>
  
  <p>My idea was to maintain an ordered array for each state and then render the list according to the array using something like Mustache or Handlebars. Is there any better solution to this which is also future proof?</p>