This is a migrated thread and some comments may be shown as answers.

Unbounded callbacks

1 Answer 89 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 16 Sep 2013, 06:49 PM
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?

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 19 Sep 2013, 06:57 AM
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!
Tags
MVVM
Asked by
Bob
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or