renrongrong/pandyle

An MVVM library for jQuery / 为jQuery编写的MVVM库

pandyle

pandyle是一个基于jquery的MVVM库。它为jquery提供了基本的模板和组件功能。pandyle秉承jquery -- write less, do more 的设计理念，主要关注点即在于简单，它的大小只有7kb（压缩后），易学易用，努力减少你书写的代码量，并且更贴合传统的jquery的书写方式。

特点

• 简单：非常简单易上手，无需学习webpack、es6等前端知识，基本看一遍文档即可进行开发

• 兼容性良好：pandyle的兼容性取决于jquery版本，因此使用1.X版本的jquery即可兼容至ie8浏览器

• 输入与视图模型分离：pandyle使用inputs类来独立的处理用户输入，根据表单元素的name属性自动生成数据模型，无需事先定义

• 同步操作：pandyle的所有操作都是同步的，代码逻辑清晰的同时保证了同其他jQuery插件的良好兼容

• 资源化的组件：pandyle将组件视为一种资源，这意味着你可以像加载图片一样任意加载你想要的任意组件，只需在p-com指令中写上组件的路径即可，无需事先编译或引入特定的组件代码。此外，在pandyle中，你可以很轻松的使用p-bind来动态的绑定组件，使页面能够完全根据数据来动态生成，如以下示例：

    <div class="main">
        <div p-for="components" p-as="item">
            <div p-bind="p-com:{{@item.type}}" p-context="@item.data">
        </div>
    </div>
  
    <script>
        Pandyle.config({
            comPath: {
                Default: './otherComponents/{name}.html',
                Menu: './otherComponents/menu/{name}.html',
                MyCom: './components/{name}.html'
            }
        })
  
        var book1 = {
            title: 'book1',
            author: 'rrr',
            price: 20,
            num: 10,
            tags: ['tag1', 'tag2', 'tag3']
        };
  
        var list = [
            {
                value: 1,
                name: '选项1'
            },
            {
                value: 2,
                name: '选项2'
            }
        ]
        var vm = $('.main').vm({
            components: [
                {
                    type: 'test'
                },
                {
                    type: 'MyCom.book',
                    data: book1
                },
                {
                    type: 'list',
                    data: {
                        title: '列表1',
                        name: 'checkList',
                        list: list
                    }
                }
            ]
        })
    </script>
  

适用场景

• 老项目重构：这可能是pandyle最能发挥作用的场景。很多老项目中使用了大量的jquery代码及jquery插件，使用其他框架进行重构的话可能会引起大量的修改，使用pandyle能以最小的代价对老项目完成mvvm的改造
• 兼容性要求较高的项目：一些特定领域的项目可能仍然要求兼容ie8甚至ie8以下的浏览器，不适合使用三大框架，这种情况下可以尝试使用pandyle作为替代
• 后端人员开发：pandyle对后端开发者是友好的，无需掌握现代前端的一系列工具和语法，后端开发者可以轻松上手
• 小项目：对小项目来说，pandyle的开发效率可能更高，有兴趣的可以尝试一下

文档

在wiki中查看文档

交流

你可以加入QQ群进行技术交流：524640426

pandyle's Issues

插值符号是否可以自定义 {{ }}

插值符号是否可以自定义 {{ }}

低版本IE不支持

低版本IE不支持，例如：IE7

文本插值与html标签相邻时如法正确解析

<div id="main">
    <p> <span>显示:</span> {{message}}</p>
</div>
<script type="text/javascript">
    $(function(){
        var data = {
            message: "hello pandyle"
        }
        var vm = $("#main").vm(data);

        $('button').click(function(e){
            data.message = "new string";
            vm.set(data);
        });
    });
</script>

像上面这种写法message不能正确解析，需要再用一个html标签包裹才行。

<p> <span>显示:</span> <span>{{message}}</span></p>

p-context上下文不支持多级html的数据更新

<div class="modal" p-context="modal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">{{title}}</p>
        </header>
        <section class="modal-card-body">{{content}}</section>
        <footer class="modal-card-foot">
            <button class="button is-success ok">{{ok}}</button>
            <button class="button cancel">{{cancel}}</button>
        </footer>
    </div>
</div>

这样的html结构更新不了数据，像这样多级节点的结构set后没反应，还试了一下用别名也不行。

<div class="test" p-context="test">
    <div>{{title}}</div>
    <div>{{content}}</div>
</div>

只能支持这种父子级结构才能set数据

不知道这算不算BUG，有什么其他解决方法吗？

bug

页面初始化时花括号会首先渲染，这部分处理了吗？