Ajax数据双向数据绑定策略？

我想要
1）绘制创建表单字段并使用javascript对象的数据填充
2）每当窗体字段的值更改时更新这些后备对象

I'd like to 1) Draw create form fields and populate them with data from javascript objects 2) Update those backing objects whenever the value of the form field changes

数字1很容易。我有一些js模板系统，我一直在使用这个工作相当不错。

Number 1 is easy. I have a few js template systems I've been using that work quite nicely.

数字2可能需要一点思考。对ajax数据绑定的快速google搜索引发了一些似乎基本上单向的系统。它们旨在根据支持的js对象来更新UI，但是当对UI进行更改时，似乎没有解决如何更新这些后备对象的问题。任何人都可以推荐任何这样做的图书馆吗？这是我可以写自己没有太多麻烦的东西，但是如果这个问题已经被考虑过了，我宁愿不重复工作。

Number 2 may require a bit of thought. A quick google search on "ajax data binding" turned up a few systems which seem basically one-way. They're designed to update a UI based on backing js objects, but don't seem to address the question of how to update those backing objects when changes are made to the UI. Can anyone recommend any libraries which will do this for me? It's something I can write myself without too much trouble, but if this question has already been thought through, I'd rather not duplicate the work.

///// /////////////////编辑///////////////

////////////////////// edit /////////////////

我已经创建了我自己的jQuery插件来完成这个。这里是。请让我知道，如果它是有用的，如果你认为这可能值得让它更官方。另外让我知道你有没有问题或问题。

I've created my own jquery plugin to accomplish this. Here it is. Please let me know if it's useful and if you think it might be worth making it more "official". Also let me know if you have problems or questions.

/*

    Takes a jquery object and binds its form elements with a backing javascript object. Takes two arguments: the object 
    to be bound to, and an optional "changeListener", which must implement a "changeHappened" method.

    Example: 

    // ============================
    // =     backing object       =
    // ============================

    demoBean = {
        prop1 : "val",
        prop2 : [
            {nestedObjProp:"val"},
            {nestedObjProp:"val"}
        ],
        prop3 : [
            "stringVal1",
            "stringVal12"
        ]
    }

    // ===========================
    // =        FORM FIELD       =
    // ===========================

    <input class="bindable" name="prop2[1].nestedObjProp">


    // ===========================
    // =       INVOCATION        =
    // ===========================

    $jq(".bindable").bindData( 
        demoBean, 
        {changeHappened: function(){console.log("change")}}
    )


*/


(function($){


    // returns the value of the property found at the given path
    // plus a function you can use to set that property
    var navigateObject = function(parentObj, pathArg){
        var immediateParent = parentObj;
        var path = pathArg
            .replace("[", ".")
            .replace("]", "")
            .replace("].", ".")
            .split(".");
        for(var i=0; i< (path.length-1); i++){
            var currentPathKey = path[i];
            immediateParent = immediateParent[currentPathKey];
            if(immediateParent === null){
                throw new Error("bindData plugin encountered a null value at  " + path[i] + " in path" + path);
            }
        }

        return {
            value: immediateParent[path[path.length - 1]],
            set: function(val){
                immediateParent[path[path.length - 1]] = val
            },
            deleteObj: function(){
                if($.isArray(immediateParent)){
                    immediateParent.splice(path[path.length - 1], 1);
                }else{
                    delete  immediateParent[path[path.length - 1]];
                }
            } 
        }

    }

    var isEmpty = function(str){
        return str == null || str == "";
    }

    var bindData = function(parentObj, changeListener){

        var parentObj,
            radioButtons = [];
        var changeListener;
        var settings;
        var defaultSettings = {
            // if this flag is true, you can put a label in a field,
            // like <input value="Phone Number"/>, and the value
            // won't be replaced by a blank value in the parentObj
            // Additionally, if the user clicks on the field, the field will be cleared.
            allowLabelsInfields: true 
        };

        // allow two forms: 
        // function(parentObj, changeListener)
        // and function(settings). 
        if(arguments.length == 2){
            parentObj = arguments[0];
            changeListener = arguments[1]
            settings = defaultSettings;
        }else{  
            settings = $jq.extend(defaultSettings, arguments[0]);
            parentObj = settings.parentObj;
            changeListener = settings.changeListener;
        }

        var changeHappened = function(){};
        if(typeof changeListener != "undefined"){
            if(typeof changeListener.changeHappened == "function"){
                changeHappened = changeListener.changeHappened;
            }else{
                throw new Error("A changeListener must have a method called 'changeHappened'.");
            }
        };
        this.each(function(key,val){
            var formElem = $(val);
            var tagName = formElem.attr("tagName").toLowerCase();
            var fieldType;
          if(tagName == "input"){
            fieldType = formElem.attr("type").toLowerCase();
          }else{
            fieldType = tagName;
          }


            // Use the "name" attribute as the address of the property we want to bind to.
            // Except if it's a radio button, in which case, use the "value" because "name" is the name of the group
            // This should work for arbitrarily deeply nested data. 
            var navigationResult = navigateObject(parentObj, formElem.attr(fieldType === "radio"? "value" : "name"));

            // populate the field with the data in the backing object

            switch(fieldType){

        // is it a radio button? If so, check it or not based on the 
        // boolean value of navigationResult.value
        case "radio":
          radioButtons.push(formElem);
          formElem.data("bindDataPlugin", {navigationResult: navigationResult});
          formElem.attr("checked", navigationResult.value);
          formElem.change(function(){
            // Radio buttons only seem to update when _selected_, not 
            // when deselected. So if one is clicked, update the bound
            // object for all of them. I know it's a little ugly,
            // but it works.
            $jq.each(radioButtons, function(index, button){
              var butt = $jq(button);
              butt.data("bindDataPlugin").navigationResult.set(butt.attr("checked"));
            });
            navigationResult.set(formElem.attr("checked"));           
            changeHappened();
          });
          break;

        case "text":
          // if useFieldLabel is true, it means that the field is 
          // self-labeling. For example, an email field whose 
          // default value is "Enter Email".
          var useFieldLabel = isEmpty( navigationResult.value )
                   && !isEmpty( formElem.val() )  
                   && settings.allowLabelsInfields;
          if(useFieldLabel){
           var labelText = formElem.val();
           formElem.click(function(){
             if(formElem.val() === labelText){
               formElem.val("");
             }
           })
          }else{
           formElem.attr("value", navigationResult.value);
          }
          formElem.keyup(function(){
           navigationResult.set(formElem.attr("value"));
           changeHappened();
          });

          break;

        case "select":
          var domElem = formElem.get(0);
                $jq.each(domElem.options, function(index, option){
                    if(option.value === navigationResult.value){
                        domElem.selectedIndex = index;
                    }
                });
                formElem.change(function(){
                    navigationResult.set(formElem.val());
                })
          break;

        case "textarea":
          formElem.text(navigationResult.value);
          formElem.keyup(function(){
           changeHappened();
           navigationResult.set(formElem.val());
          });
          break;
      }


        });
        return this;
    };

    bindData.navigateObject = navigateObject;

    $.fn.bindData = bindData;

})(jQuery);