Discussion: how to assign values faster

Background

When displaying data, the general values and values are as follows.

// set$("#name").val(data.name);$("#realname").val(data.realname);$("#address").val(data.address);$("#sex").val(data.name);$("#love").attr(!!data.love);// getvar data = {    name:$("#name").val(),    realname:$("#realname").val(),    address:$("#address").val(),    sex:$("#sex").val(),    love:$("#love").attr('checked')};

The number of recent project fields is quite large, and there are about 30 + fields, which are also depressing. Assignment and value are mechanical. Therefore, when a form is submitted, it is inaccurate to say that the data received in the background is the key-value pairs of the Control name and value. Since the form can be directly valued, and submit it to the background. The assignment value should also be acceptable.

Summarize the requirements of the landlord, get an object, and directly assign the object data to the control on the page. Based on the definition of an object, you can directly obtain the value of the control on the page and return it as an object.

Implementation

It doesn't matter if you don't understand it. The general idea is this. Let's take a look at how the pages and js calls are written.

<Form id = "form1"> <input type = "text" name = "uid"/> <input type = "text" name = "pwd"/> <input type = "checkbox" name = "love"/> <input type = "radio" name = "g1" value = "1"/> <input type = "radio" name = "g1 "value =" 2 "/> <input type =" radio "name =" g1 "value =" 3 "/> <input type =" text "name =" gselect "value /> <select name = "sl"> <option value = "11"> 11 </option> <option value = "22"> 22 </option> </select> </form> <input type = "button" id = "btn" value = "value"/>

The control in the form specifies the name as the key of the stored value or value.

    var data = {        uid: 'cnblogs',        pwd: '12345',        sl: '22',        love: true,        g1: '3',        gselect: function () {            return $("#form1 [name=g1]:checked").val();        }    };    $("#btn").on('click', function () {        var d = $("#form1").getModel(data);        alert(JSON.stringify(d));    });    $("#form1").setModel(data);

In this way, the value assignment and value can be completed. The specific implementation is to retrieve the corresponding values based on the control type, such as the vakue attribute and checked attribute.

The initial implementation is as follows, which can be modified based on the actual application.

(Function ($) {function BindModel (p) {p = $. extend ({method: 'get', data :{}}, p); var isGet = p. method = "get"; var ret ={}; for (var name in p. data) {var $ name = $ (p. container ). find ("[name = '" + name + "']"); // skip if (! $ Name. length) continue; // obtain the current object value var value; if (typeof p. data [name] = "function") {// when the value is a function, if (isGet) {ret [name] = p. data [name]. call (); continue;} else {value = p. data [name]. call () ;}} else {value = p. data [name];} // assign var tag = $ name [0] based on the control type. tagName; var t = $ name. attr ("type"); if (tag = "SELECT" | t = "text") {if (isGet) ret [name] = $ name. val (); else $ name. val (value | '');} Else if (t = "checkbox") {if (isGet) ret [name] = !! $ Name. attr ('checked'); else $ name. attr ('checked ',!! Value);} else if (t = "radio") {// a single vertex name is the same as a group, which is distinguished by value. each (function () {if (isGet & this. checked) {ret [name] = this. value; return false;} else if (! IsGet & this. value = value) {this. checked = true ;}}) ;}else if (tag = 'td '| tag = 'span') {if (isGet) ret [name] = $ name. text (); else $ name. text (value) }}if (isGet) return ret;} $. fn. setModel = function (data) {BindModel ({method: 'set', data: data, container: this}) ;}$. fn. getModel = function (data) {return BindModel ({method: 'get', data: data, container: this}) ;}) (jQuery );

This aims to make the value assignment faster while maintaining the old project, and to free the hands of our friends.

At present, it is an idea and preliminary implementation. If you have better ideas, please let us know. thank you first.

Package download