easyview

Easy jQuery MVVM (model - view - viewmodel) plugin based on jsviews. For markups documentation, see https://www.jsviews.com.

Install

``javascript
npm install jquery-easyview
`

Demo

Live Demo (plunker)

Options

#### model

Type: Object Default: {}
Data represents real state content.

`javascript
model: {
title: 'My Heroes',
selected: null,
heroes: [
{id: 1, name: 'Windstorm'},
{id: 2, name: 'Bombasto'}
]
}
`

#### events
Type: Object Default: {}
DOM Events binding specification.

`javascript
events: {
'click button': 'onButtonClick',
'keypress input': function(e) {
if (e.keyCode === 13) {
// ...
}
}
},

onButtonClick: function(e){
e.preventDefault();
// ...
}
`

Example

`html

My Heroes

Click on hero to edit

{^{for heroes}}

• 
  
  

{{/for}}

{^{if selected}}

My Hero Detail

Edit hero:
{{/if}}

`

`javascript
// file: script.js

$(document).ready(function(){

$('#example').easyview({
model: {
selected: null,
heroes: [
{id: 1, name: 'Windstorm'},
{id: 2, name: 'Bombasto'}
]
},
events: {
'click li > a': 'onSelectHero'
},
onSelectHero: function(e) {
e.preventDefault();

var hero = this.get($(e.currentTarget));
this.set('selected', hero);
}
});

});

`

Methods

#### set()
Set model property value.

`javascript
// using string as key
$('#example').easyview('set', 'title', 'Untitled');
$('#example').easyview('set', 'selected.name', 'Magneta');

// using jQuery object
$('#example').easyview('set', $('li.selected'), 'name', 'Magma');
`

#### get()
Get model property value

`javascript
// using string as key
var hero = $('#example').easyview('get', 'selected');

// using jQuery object
var hero = $('#example').easyview('get', $('li.selected'));
``