backbone-components

use backbone views like webcomponents

Example

index.html:

BackboneComponents.import('test-view.html')
  .then(function () {

    var testView = new TestView({
      el: document.querySelector('#container')
    });

    testView.render();
    
  });

component file test-view.html:

<backbone-component name="TestView">

  <!-- html templates -->

  <script type="text/html-template" id="main">
    <div class="test-view">
      <button class="btn-clickme">clickme</button>
      <h1>says <%-say %> </h1>      
    </div>
  </script>

  <script type="text/html-template" id="other">
      <h2>other content</h2>
  </script>

  <!-- backbone view definition -->
  <script type="text/javascript">

  (function () {

    // define backbone view
    var TestView =  BackboneComponents.extend({

      events: {
        'click .btn-clickme': function () {
          this.$('.test-view').append(TestView.templates.other());
        }
      },

      render: function () {
        this.$el.html(
          TestView.templates.main({say: 'hi!'})
        );
      }
    });

    // register view
    BackboneComponents.register('TestView', TestView);

  }());
  </script>

</backbone-component>

• supports nested components
• easily define multiple html templates for a component
• handles dependencies for you
• lets you define css styles
• all in one file!

also see example folder for more examples.

when starting example/index.html with file:// protocol in chrome, start chrome option --allow-insecure-localhost

want to run from web server?

$ npm run static-server
static-server listening on http://localhost:3000

goto http://localhost:3000/example/ to see the example

requires: backbonejs, underscorejs and jquery

firefox requries web components polyfill to import