onlyurei/knockout-spa

<section class="padding-left-right">
  <page-source-display params="js: 'app/resources/resources.js',
                               html: 'app/resources/resources.html',
                               css: 'app/resources/resources.css'">
  </page-source-display>
  <p data-bind="string: 'resources.instruction'"></p>
  <ul class="collapsible">
    <li>
      <a data-bind="attr: { href: (resource == 'knockout') ? '/resources' : '/resources/knockout' }" class="collapsible-header vertical-align-middle hoverable">
        <img src="http://knockoutjs.com/img/ko-logo.png">
        <span>Knockout - simplify dynamic JavaScript UIs with the Model-View-View Model (MVVM)</span>
      </a>
      <!-- ko if: resource == 'knockout' -->
      <div class="padding-left-right">
        <a href="http://knockoutjs.com/documentation/introduction.html">
          <h2>API</h2>
          <div>http://knockoutjs.com/documentation/introduction.html</div>
        </a>
        <hr>
        <a href="https://www.npmjs.com/search?q=knockout">
          <h2>NPM Packages</h2>
          <div>https://www.npmjs.com/search?q=knockout</div>
        </a>
        <hr>
        <a href="https://github.com/dnbard/awesome-knockout">
          <h2>Awesome Knockout</h2>
          <div>https://github.com/dnbard/awesome-knockout</div>
        </a>
        <hr>
        <div data-bind="marked: { url: 'https://raw.githubusercontent.com/dnbard/awesome-knockout/master/readme.md' }">
        </div>
        <hr>
        <a href="https://github.com/knockout/knockout/wiki/Plugins">
          <h2>Plugins</h2>
          <div>https://github.com/knockout/knockout/wiki/Plugins</div>
        </a>
        <hr>
        <div data-bind="marked: { url: 'https://raw.githubusercontent.com/wiki/knockout/knockout/Plugins.md' }"></div>
        <hr>
        <a href="https://github.com/knockout/knockout/wiki/Bindings">
          <h2>Bindings</h2>
          <div>https://github.com/knockout/knockout/wiki/Bindings</div>
        </a>
        <hr>
        <div data-bind="marked: { url: 'https://raw.githubusercontent.com/wiki/knockout/knockout/Bindings.md' }"></div>
        <hr>
        <a href="https://github.com/knockout/knockout/wiki/Recipes">
          <h2>Recipes</h2>
          <div>https://github.com/knockout/knockout/wiki/Recipes</div>
        </a>
        <hr>
        <div data-bind="marked: { url: 'https://raw.githubusercontent.com/wiki/knockout/knockout/Recipes.md' }"></div>
      </div>
      <!-- /ko -->
    </li>
    <li>
      <a data-bind="attr: { href: (resource == 'require') ? '/resources' : '/resources/require' }" class="collapsible-header vertical-align-middle hoverable">
        <img src="http://requirejs.org/i/logo.png">
        <span>Require - a file and module loader for JavaScript</span>
      </a>
      <!-- ko if: resource == 'require' -->
      <div class="padding-left-right">
        <a href="http://requirejs.org/docs/api.html">
          <h2>API</h2>
          <div>http://requirejs.org/docs/api.html</div>
        </a>
        <hr>
        <a href="https://github.com/requirejs/requirejs/wiki/Plugins">
          <h2>Plugins</h2>
          <div>https://github.com/requirejs/requirejs/wiki/Plugins</div>
        </a>
        <hr>
        <div data-bind="marked: { url: 'https://raw.githubusercontent.com/wiki/requirejs/requirejs/Plugins.md' }"></div>
        <hr>
        <a href="https://github.com/requirejs/requirejs/wiki/Test-frameworks">
          <h2>Test frameworks</h2>
          <div>https://github.com/requirejs/requirejs/wiki/Test-frameworks</div>
        </a>
        <hr>
        <div data-bind="marked: { url: 'https://raw.githubusercontent.com/wiki/requirejs/requirejs/Test-frameworks.md' }"></div>
      </div>
      <!-- /ko -->
    </li>
    <li>
      <a data-bind="attr: { href: (resource == 'director') ? '/resources' : '/resources/director' }" class="collapsible-header vertical-align-middle hoverable">
        <img src="https://raw.githubusercontent.com/flatiron/director/master/img/director.png">
        <span>Director - a tiny and isomorphic URL router for JavaScript</span>
      </a>
      <!-- ko if: resource == 'director' -->
      <div class="padding-left-right">
        <a href="https://github.com/flatiron/director">
          <h2>API</h2>
          <div>https://github.com/flatiron/director</div>
        </a>
        <hr>
        <div data-bind="marked: { url: 'https://raw.githubusercontent.com/flatiron/director/master/README.md' }"></div>
      </div>
      <!-- /ko -->
    </li>
    <li>
      <a data-bind="attr: { href: (resource == 'jquery') ? '/resources' : '/resources/jquery' }" class="collapsible-header vertical-align-middle hoverable">
        <img src="//jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery@2x.png">
        <span>jQuery - write less, do more</span>
      </a>
      <!-- ko if: resource == 'jquery' -->
      <div class="padding-left-right">
        <a href="https://api.jquery.com/">
          <h2>API</h2>
          <div>https://api.jquery.com/</div>
        </a>
        <hr>
        <iframe src="https://api.jquery.com/"></iframe>
      </div>
      <!-- /ko -->
    </li>
    <li>
      <a data-bind="attr: { href: (resource == 'sugar') ? '/resources' : '/resources/sugar' }" class="collapsible-header vertical-align-middle hoverable">
        <img src="https://sugarjs.com/assets/images/sugar.svg">
        <span>Sugar - a Javascript library for working with native objects</span>
      </a>
      <!-- ko if: resource == 'sugar' -->
      <div class="padding-left-right">
        <a href="https://sugarjs.com/api">
          <h2>API</h2>
          <div>https://sugarjs.com/api</div>
        </a>
        <hr>
        <iframe src="https://sugarjs.com/api"></iframe>
      </div>
      <!-- /ko -->
    </li>
    <li>
      <a data-bind="attr: { href: (resource == 'jsface') ? '/resources' : '/resources/jsface' }" class="collapsible-header vertical-align-middle hoverable">
        <span>JSFace - small, fast, elegant, powerful, and cross platform JavaScript OOP library</span>
      </a>
      <!-- ko if: resource == 'jsface' -->
      <div class="padding-left-right">
        <a href="https://github.com/tnhu/jsface">
          <h2>API</h2>
          <div>https://github.com/tnhu/jsface</div>
        </a>
        <hr>
        <div data-bind="marked: { url: 'https://raw.githubusercontent.com/tnhu/jsface/master/README.md' }"></div>
      </div>
      <!-- /ko -->
    </li>
  </ul>
</section>