标签：for   hid   实现   范围   推荐   字符   css   mdi   语法   

这个不要脸的 jQuery 扩充函数 - jquery-model 是在下的拙作，原本是我个人用 jQuery 在开发前端程序时所使用的，同事也拿去用了之后受到好评，应该也可以推荐给大家，它不是一个什么高大上的东西，只是让我在将 UI 上的内容兜成 JSON 对象时可以少写一些程序。

缘起

会搞这个东西有两个原因，第一个原因是“有时候前端的 MVVM 框架太沉重了”，使用 MVVM 的前端框架来开发 SPA 程序真的非常合适，只要专注在 Model 上，以及事先声明好状态与 UI 的关系，后续就交给框架来处理，相当轻松，但是当我的页面是无状态的时候，引用 MVVM 前端框架就显得有点杀鸡用牛刀的感觉。

第二个原因是“团队以 jQuery 为主要的前端工具”，我们公司的 UI 设计师强项在 HTML 跟 CSS，JavaScript 就弱了一些，所以经常会去找一些现成的 jQuery Plugin 回来自己调模式，以实现页面上一些特殊的交互功能，那么 MVVM 前端框架大都无法跟 jQuery Plugin 直接无缝接轨，运气好一点是可以找到有大大缝合好的版本，没有的话就要自己缝了。

基于这两个原因，我就在想能不能有一个简便的方法，直接将 HTML 组件的内容转成一个 JSON 对象，以及将 JSON 对象更新到 HTML 组件上？　因此 jquery-model 就诞生了。

jquery-model

受到 MVVM 框架的启发，它采用声明式语法，只有三个：c-model、c-model-number、c-model-html（这个稍后会介绍到），如果 property 是字符串型态就用 c-model，是数值型态就用 c-model-number，attribute 的值为 property 的名称。

    
formDiv
    

    

    

        
            opt1
            opt2
            opt3
        
    

如果要输出 JSON 对象，就使用 model() 方法：

$("#formDiv").model();

// result: { abcText: "abc", abcNumber: 123, myOpt: "opt2" }

如果要将 JSON 对象更新到 HTML 组件上，就用 model({...}) 或 model("property", value) 方法：

$("#formDiv").model({ abcText: "cba", abcNumber: 456 });

// --or--

$("#formDiv").model("abcText", "cba");
$("#formDiv").model("abcNumber", 456);

radio

radio 是用 name attribute 组成一个群组的，所以 radio 组件必须指定 name attribute 及其群组名称，另外 radio 群组中只需要其中一个组件声明 c-model 或 c-model-number 即可。

    
formDiv
    

        4a
        44b
        444c
    

checkbox

checkbox 如果有指定 value attribute，有勾选就会输出?property，没有勾选就不会；如果没有指定 value attribute 就视为是 boolean 类型。

    
formDiv
    
some text
    
some text
    
some text

非输入类型的 HTML 组件

如果想要显示数据在

、

    
formDiv
    

    

    

    
formDiv
    

    

    

    
formDiv
    

    

        

        

        

    
    

        
        
44
        

        

    
    

        

        

        

    

$("#list > li").models("id", 11);

// result: { id: 11, name: "22", age: 33 }

var collection = [
    { id: 11, name: "二二二", age: 33 },
    { id: 44, name: "五五五", age: 66 },
    { id: 77, name: "八八八", age: 99 }
];

$("#list > li").models(collection, "id");

$("#list > li").models({ id: 11, name: "二二二", age: 33 }, "id");