Generic form field binding

3 posts, 0 answers
  1. Franz
    Franz avatar
    4 posts
    Member since:
    Oct 2011

    Posted 20 Jun 2012 Link to this post

    I want to implement a generic form field binding with kendo MVVM. This means that my model shouldn't contain any hard-wired field IDs in its bindings, instead it should be able to bind to any form rendered by the server. Here is what I've got so far:

    var genericModel = {};
    function bindField($field) {
        var viewModel = kendo.observable({
            value: "John Doe"
        });
        $field.attr('data-bind', 'value: value');
        kendo.bind($field, viewModel);
       genericModel[$field.attr('id')] = viewModel;
    }
     
     
    $(function () {
        var $inputs = $('input').not('.datetimepicker, .autocomplete');
        $inputs.each(function () {
            bindField($(this));
        });
    });

    This code iterates through all input fields, attaches the necessary data-bind attributes to them and sets up the model binding for each field. Finally all field objects are stored in the global genericModel object.

    Unfortunately, this approach doesn't seem to work - changes aren't updated in both directions. I also tried the "nested binding" approach mentioned in the docs but had no luck either. I'm using KendoUI v2012.2.531

    Any idea?

    Thanks,

    Franz
  2. Franz
    Franz avatar
    4 posts
    Member since:
    Oct 2011

    Posted 21 Jun 2012 Link to this post

    finally i had success using the "nested" approach:

    var genericModel = {};
    function bindField($field) {
       var fieldId = $field.attr('id');
       genericModel[fieldId] = {value: 'test'};
       $field.attr('data-bind', 'value: ' + fieldId + '.value');
    }
      
      
    $(function () {
        var $inputs = $('input').not('.datetimepicker, .autocomplete');
        $inputs.each(function () {
            bindField($(this));
        });
        kendo.bind($('form'), genericModel);
    });
  3. Kendo UI is VS 2017 Ready
  4. Peter Bulloch
    Peter Bulloch avatar
    13 posts
    Member since:
    Mar 2010

    Posted 22 Jun 2012 Link to this post

    Franz, can you post you entire code please?  I'm also having challenges with MVVM and am looking for best practices. Ideally I'd like to focus on the 2012 Q2 beta release.
Back to Top