# Simple-MVVM

**Repository Path**: zyallen_admin/Simple-MVVM

## Basic Information

- **Project Name**: Simple-MVVM
- **Description**: 实现一个简单的js前端MVVM框架
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-07-04
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Simple-MVVM
实现一个简单的js前端MVVM框架

示例：
```
    <div class="form-horizontal" role="form" data-context="TestController">
        <div class="form-group">
            <div class="col-sm-6 col-sm-offset-2">
                 <input type="text" class="form-control" bind-val="stu.age,format=format" style="margin:5px 0" />
                 <p bind-html="desc" style="margin:5px 0"></p>
                 <input type="range" min="10" max="300" bind-val="stu.age" step="10" class="form-control" style="margin:5px 0" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-6 col-sm-offset-2">
                <button type="button" class="btn btn-primary" data-page="1" on-click="update">
                    查询
                </button>
            </div>
        </div>
    </div>
    <script>
        var ModalController = {
            data: {
                stu: {
                    name: 'xiaoming',
                    age: 3,
                },
                desc: function () {
                    return 'my name is ' + this.stu.name + '<br/> my age is' + this.stu.age
                }
            },
            format: function (val) {
                return val + ' likes looking little movie. he should take care of his body'
            },
            update: function () {
                this.stu = {
                    name: 'this is a test',
                    age: 18
                }
            }

        }
        $('body').controller()

    </script>
```


1. 指令，格式： bind-{指令}="prop,format=method"
- bind-val
- bind-attr
- bind-text
- bind-html
- bind-template

扩展指令：
```
$.controller.addDirective("val", {
        init: function (observer) {
            if (observer.$ele.is('input,select')) {
                //监听onchange事件
                observer.$ele.on('input propertychange', function () {
                    var newVal = $(this).val()
                    observer.writeValue(newVal)
                })
            }
        },
        update: function ($ele, newVal, controller) {
            $ele.val && $ele.val(newVal)
        }
    })
```


2. 事件

语法： on-{event}="method,type=on/one"

支持的事件有：'blur','change','click','dblclick','error','focus','focusin','focusout','keydown','keypress',
'keyup','mousedown','mouseenter','mouseleave','mousemove','mouseout','mouseover','mouseup','resize','scroll',
'select','submit','unload'。


3. 后期计划
- 移除对jquery-tmpl的依赖，增加对数组的增删改操作双向绑定到dom的支持。
- 完善部分使用体验，增加指令： bind-if