Knockout.js applyBinding

[Павел Чижиков]

i've a problem;)

1)html snippet 

   

<div style="display: inline-block;" data-bind="foreach: filters">
        <select multiple="multiple" size="10" class="form-group form-control filters" type="search"
                style="display: none;" <!--Main reason is slow rendering in IE8-->
                data-bind="attr: {'id': 'filter' + $index()},
                           options: $.map($data.ValuesDictionary, function( key, val ) {
                                return { label: key(), value: val };
                           }),
                           optionsText: 'label',
                           optionsValue: 'value',
                           selectedOptions: $data.CheckedValues,
                           multiselect:{
                                allSelectedText: $data.NameDescription(),
                                buttonText: function (options, select) {
                                    return $data.NameDescription() + ' (' + $data.CheckedValues().length + ' / ' +  $data.AllAvailableValues().length +')';
                                },
                           }">
        </select>
    <button type="submit" class="form-control btn btn-primary col-lg-2 pull-right" style="margin-left: 0.5em;">Filtres</button>
    </div>

2)VM has the observable property, but it's empty at the start

    ..
    filters: ko.observableArray([]).extend({ deferred: true }),
    ..

i.e html is ... (at the start)

    <div style="display: inline-block;" data-bind="foreach: filters"></div>
    <button type="submit" class="form-control btn btn-primary col-lg-2 pull-right" style="margin-left: 0.5em;">Filters</button>

3)I request to server and get json array ( filters DTO), then i set receipt value to vm property

    ko.mapping.fromJS(data, {}, self.filters);

•  - data - filters dto from server
  
•  - self.filters - observable array property in VM

Problem: 

  Unable to process binding "multiselect: function (){return {
                               
                                allSelectedText:$data.NameDescription(),buttonText:function(options,select){
                                    return $data.NameDescription() +' ('+ $data.CheckedValues().length +' / '+  $data.AllAvailableValues().length +')';},} }"
    Message: $data.NameDescription is not a function
        at multiselect (eval at createBindingsStringEvaluator (knockout-3.4.2.debug.js:2992), <anonymous>:6:51)
        at init (koBindings.js:265)
        at knockout-3.4.2.debug.js:3368
        at Object.ignore (knockout-3.4.2.debug.js:1480)
        at knockout-3.4.2.debug.js:3367
        at Object.arrayForEach (knockout-3.4.2.debug.js:159)
        at applyBindingsToNodeInternal (knockout-3.4.2.debug.js:3353)
        at applyBindingsToNodeAndDescendantsInternal (knockout-3.4.2.debug.js:3233)
        at Object.ko.applyBindings (knockout-3.4.2.debug.js:3444)
        at knockout-3.4.2.debug.js:5303

   

I think main reason is that appropriate html is absent (

`<select> ... </select>`

) and knockout hasn't binded with it at the start. 

Thus, when i recieve data from server and am trying to set it to mv property i get error

I've write some log:

...
     buttonText: function (options, select) {
   
                                    console.log('data: ');
                                    console.log( $data );
                                    console.log ('NameDescription :');
                                    console.log(ko.isObservable($data.NameDescription) ? $data.NameDescription() : $data.NameDescription);
   
                                    return $index();
                                    @*$data.NameDescription() + ' (' + $data.CheckedValues().length + ' / ' +  $data.AllAvailableValues().length +')';*@
                                },
...

Would you help me resolve this issue. 

Do i need ko.applyBindings with specific html or i should create child view model ?. or something else?

How can i do it right?

Thank you in advance

[Павел Чижиков]

I've found reason the mistake. it's my inattention). I send diffrent formatted json object from 2 diffrent services. (Web api - camelCase, MVC - UpperCase). Once I had fixed it, everything began to work