Unbounded callbacks

2 posts, 0 answers
  1. Bob
    Bob avatar
    46 posts
    Member since:
    Apr 2012

    Posted 16 Sep 2013 Link to this post

    If I declare a view as
    <div data-role="view"
         data-title="Form Unexpected but nice"
         data-init="ns.viewA.init"
         data-before-show="ns.viewA.beforeShow"
         data-show="ns.viewA.show"
         data-model="ns.viewA.viewModel">
     
         ...
         <select data-bind="source:options,value:underlying.optionId"
               data-text-field="display"
               data-value-field="id"></select>
         ...
    </div>
    Then declare the js as
    01.(function($, kendo, ns){
    02.   var model = {
    03.      options: [],
    04.      underlying: null
    05.   };
    06.    
    07.   model.bind('change', function (e) {
    08.      var t;
    09.      console.info('field %s changed.', e.field);
    10.      if (e.field === 'underlying.optionId') {
    11.         t = viewModel.options.singleOrDefault('id', model.underlying.optionId);
    12.         viewModel.set('model.underlying.derivedValue', t.someValue);
    13.      }
    14.   });
    15.    
    16.   ns.viewA = {
    17.      init: function(){
    18.          // populate options
    19.          ...
    20.      },
    21.      beforeShow:function(){
    22.      },
    23.      show: function(){
    24.         model.set('underlying', {
    25.            optionId: null,
    26.            derivedValue: 'Not Set'
    27.         });
    28.      },
    29.      viewModel: model
    30.   };
    31.}(jQuery, kendo, myApp));

    I've two issues,  One if I properly instantiate the viewModel in the view.init, then the select source binding barfs because the array is not set when the binding is invoked.  What can I do to have the viewmodel late bound?  I've tried using kendo.bind(e.view.element, model) but this has the undesirable side-effect of destroying my
    1.<ul data-role='listview'><li>static option/information</li></ul>


    Two, when using SPA every visit to this view invokes another repetition of the 'change' event handler.  Thus, the first time I visit this view, the change handler is accurately invoked only once.  The second visit invokes the change handler twice.  Third view yields three executions and so on.  I'm assuming this has to do with the binding engine retaining a hook to the previous underlying object.  What can I do to ensure the change is only fired the one time for the current underlying regardless of the view count?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 19 Sep 2013 Link to this post

    Hello Bob,

    I am afraid that what you would like to achieve is not supported. The View should be bound to a ViewModel via data-model attribute as explained in this help topic.

    Calling manually kendo.bind is not recommended. The ListView in your case is destroyed because kendo.bind attempts to initialize a web listview from the element with data-role="listview".

    Regarding your second question, I assume that this happens because the change event is bound multiple times by custom code (probably inside the view-show event handler). Please do not rebind/reinitialize Kendo UI components on view-show.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top