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