❤
npm
Sign UpSign In

jquery-easyview

1.0.0 • Public • Published

easyview

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

Install

npm install jquery-easyview

Demo

Live Demo (plunker)

Options

model

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

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

events

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

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

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- part of view -->
<div id="example">
    <h1>My Heroes</h1>
    <p>Click on hero to edit</p>
    <ul>
    {^{for heroes}}
    	<li data-link="class{merge:~root.selected && ~root.selected.id==id toggle='selected'}">
        	<a href="#" data-link="{:name}"></a>
        </li>
    {{/for}}
    </ul>
    {^{if selected}}
    <h2>My Hero Detail</h2>
    Edit hero: <input type="text" data-link="selected^name trigger=true">
    {{/if}}
</div>
 
<!-- include libraries -->
<script src="PATH_TO_JQUERY"></script>
<script src="jquery-easyview.js"></script>
 
<!-- your script -->
<script src="script.js"></script>
 
</body>
</html>
// 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.

// 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

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

Readme

Keywords

Package Sidebar

Install

npm i jquery-easyview

Repository

github.com/londomloto/easyview

Homepage

github.com/londomloto/easyview#readme

Weekly Downloads

2

Version

1.0.0

License

ISC

Last publish

Collaborators

  • londomloto
Try on RunKit
Report malware