Knockout - readonly model binding from selected item in dropdown

http://stackoverflow.com/questions/9769955/knockout-readonly-model-binding-from-selected-item-in-dropdown

by JasonMore

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/knockout.mapping.js"></script>
<table>
    <tbody data-bind="foreach: someArray">
            <tr class="docsRow" data-bind="foreach:docRows">
                <td>
                    <div data-bind="attr:  {id: objectId}">
                       <a data-bind="attr: {href: someUrl}">
                          <img data-bind="attr: {src: IconPath, alt: Tooltip}"/>
                       </a> 
                       <br/>
                       <textarea runat="server" readonly="readonly" data-bind="html: DisplayName"></textarea>

                    </div>
                </td> 
            </ tr>

   </tbody>
</table>

JavaScript

//Type.registerNamespace("HpDocs");
HpDocs = {};

HpDocs.RowVM = function(data) {
    ko.mapping.fromJS(data, {}, this);

}

HpDocs.DocsVM = function(data) {
    ko.mapping.fromJS(data, {}, this);

    this.docRows = ko.observableArray();

    // add additional properties to each document for presentation
    // purposes
    for (i = 0; i < this.MyDocs().length; i++) {
        var myDoc = this.MyDocs()[i];
        myDoc.docObjectId = "docObject" + myDoc.Id();
        myDoc.textareaId = "ucHpDocs" + "_txta";

        if (i % 5 == 0) {
            // create new RowVM and start adding DocsVM to it
        } else if (i % 5 == 5) {
            // push the RowVM to this.docRows populated with cells
        } else {
            // add the myDoc to the current RowVM you are working with
        }
    }
};

HpDocs.DocsVM.prototype = {
    //    cellIsStartOfRow: function(){
    //        return true;
    //    },
    getDocs: function(filter) {
        var self = this;
        $.ajax({
            url: getMethodUrl("GetDocs"),
            data: "{'filter': " + filter + "}",
            success: function(response) {
                ko.mapping.fromJS(response.d, {}, self.MyDocs);
            }
        })
    }
};

HpDocs.dbGetDocs = function(filter) {
    $.ajax({
        url: getMethodUrl("DbGetDocs"),
        data: "{'filter': " + filter + "}",
        success: function(response) {

            myDocsViewModel = new HpDocs.DocsVM({
                MyDocs: ko.mapping.fromJS(response.d)
            });

            var bindingScope = $("#divMyDocs")[0];
            ko.applyBindings(myDocsViewModel, bindingScope);

            $(".DocsUpdateProgress").addClass("invisible");
        }
    })
};


HpDocs.getPreferredTab = function() {
    var tabPref = $("[id$='hidDocTabPreference']").html();
    return tabPref;
};

HpDocs.showProgress = function() {
    $(".DocsUpdateProgress").removeClass("invisible");
};
HpDocs.hideProgress = function() {
   ...