MiniView

Miniature (Spine/Backbone like) views for your client-side app. Respects garbage collection.

HTML

<script src="//wzrd.in/bundle/[email protected]"></script>
<header>
    <h1><a href="https://github.com/bevry/miniview" target="_blank">MiniView</a></h1>
    <p>Miniature (Spine/Backbone like) views for your client-side app. Respects garbage collection.</p>
</header><hr/>

<div class="templates">
    <div class="edit-view">
        <form class="edit-form">
            <input type="text" class="field-title"></input>
            <input type="submit" value="Submit"></input>
        </form>
    </div>
</div>

CSS

.templates {
    display: block;
}

JavaScript

// Import
var MiniView = require('miniview').View;

// Extend MiniView
var EditView = MiniView.extend({
	el: $('.edit-view').remove().first().prop('outerHTML'),
	
    elements: {
		'.field-title': '$title'
    },
    
    events: {
		'submit form.edit-form': 'submitForm'
    },

    submitForm: function (event) {
		alert('Hello '+this.$title.val());
		event.preventDefault();
        return this;
    }
});

// Create
editView = new EditView();
editView.$el.appendTo(document.body);