MVC - Performance of data binding

Question

Hi Gurus out there
I have a concern regarding performance of (dynamic) data binding if I have a lot of <i>textEdit</i> fields containing huge amount of data on a view page.
<u>Scenario</u>:
The view page contains buttons <b>[Add textEdit field]</b> and<b> [Save all entries]</b>. If you click the button <b>[Add textEdit field]</b> then a (new) <i>textEdit</i> will be generated and the model remembers the total number of <i>textEdit</i> fields that have been generated.
DATA: textedit_count TYPE i,
      o_textedit     TYPE REF TO cl_htmlb_textedit,
      tabix(6)       TYPE c,
      binding_code   TYPE string,
      binding_str    TYPE string.
textedit_count = o_model->get_section_count( ).
DO textedit_count TIMES.
* Create a unique ID for a textEdit field:
  tabix = sy-index.
  CONDESE tabix NO-GAPS.
* String for the data binding of internal table model->data_stream_tab:
  CONCATENATE '//model/data_stream_tab['
              tabix
              '].data_string'   
         INTO binding_str.
* Dynamic data binding:
  CREATE OBJECT o_textedit.
  CONCATENATE 'myTextEditID' tabix
         INTO o_textedit->id.
  o_textedit->width  = 650.
  o_textedit->height = 225.
  o_textedit->_text = binding_str.
  binding_code = o_textedit->IF_BSP_BEE~RENDER_TO_STRING( page_context ).
<htmlb:label for = "<%= o_textedit->id %>"
            text = "<%= o_textedit->id %>"
          design = "EMPHASIZED" />
<%-- Binding of the attribute (internal table) '//model/data_stream_tab<i>.data_stream' --%>
  <%= binding_code %>
ENDDO.
Obviously the <u>whole</u> contents of the <i>textEdit</i> fields in the coding above are <u>always</u> "moved" from the web browser to the server and vice versa when the button <b>[Add textEdit field]</b> is hit every time even though the content of some <i>textEdit</i> fields haven't changed.
Does anyone have a good solution/optimization for this problem? Any suggestion, comment and/or answer will be very appreciated.
Thanks
HW

Answer 1

Place this code above any textedit elements you have in your page:
<script type="text/javascript">
var myFields = new Array();
</script>
Then place this code after every textedit elements, this code will get run when the page is loaded in the browser, right after your element. You are saving the ID and the default value of your element to an array. For every further element, increase the array counter by 1!
<script type="text/javascript">
myFields[0] = new Object();
myFields[0]["id"] = 'myTextEdit1';
myFields[0]["default_value"] = document.getElementById(myFields[0]["id"]).value;
</script>
Finally, include this function in your page (does not have to be at the bottom, I just put it here chronologically):
<script type="text/javascript">
function compareFields() {
  for (var i = 0; i < myFields.length; ++i) {
    if(myFields<i>["default_value"] == document.getElementById(myFields<i>["id"]).value) {
    // nothing has changed, set to ignore-value (any highly unlikely value, like ")?.("
    document.getElementById(myFields<i>["id"]).value = ')?.(';
    // check against this value in your setter method
    // if this is set, then do not user submitted value to update your model attribute value
    // maybe do some output for debug purposes
    // alert(document.getElementById(myFields<i>["id"]).value);
}</script>
Now add this attribute to your submit button:
onClientClick = "javascript:compareFields();"
This should do, test it out and let me know.
Max