title: Dynamical view according to data
body: <p>For a object have multiple attributes, for example, a shoe may have different <code>color</code>, <code>size</code> and etc.</p>
  
  <p>Now when we tried to display the shoe, and make the customer can choose different attributes, we use radio(the simplest): <a href="https://jsfiddle.net/mwqy6217/">https://jsfiddle.net/mwqy6217/</a></p>
  
  <p>But how to make the availability of the view according to the data?</p>
  
  <p>For example, when the red shoes are sold out, the <code>red</code> radio should be un-checkable. So are different sizes.</p>
  
  <p>We can use this data structure to represent the shoe: <code>{shoe:{name:'',available:['red','black','40','41']}}</code>.</p>
  
  <p>However different attributes may have relationship with each other, for example, red shoes with 40 size have been sold out, while black shoes with 40 size have not.
  I think this data structure:</p>
  
  <p><code>{shoe:{name:'',available:{color:{red:[40,41,42]},black:[42,43]}}}</code></p>
  
  <p>As the shoe may have other attributes like 'weight', and an attributes may have 10+ options.</p>
  
  <p>So how to represent this kind of relationship in the database and make them readable by the front engineer to build the view? </p>
  
  <p>Update:</p>
  
  <p><a href="https://jsfiddle.net/xqtgqzt2/">https://jsfiddle.net/xqtgqzt2/</a></p>
  
  <p>See the live demo, all the available options is pre-defined as:</p>
  
  <pre><code>var options= [
      ["A1","B1","C1","D1"],
      ["A1","B3","D2"],
      ["A2","B1","C3","D2"]
  ];
  </code></pre>
  
  <p>Now how to  make the radio button state changed according to the options? For example, when A1 is checked, only B1 B3 can be checked(enabled), when A1 B1 are checked, only C1 D1 can be checked.</p>