Is there a way to bind dynamic list of properties?

[David Weng]

I want to write some generic code for a search form. The list of search fields can be changed. So instead of hard-code search fields like

  self.keywords = ko.observable();

  self.age = ko.observable();

   ...

    <input type="text" placeholder="Keywords" value="" data-bind="value: keywords">

I want to do something like 

   self.clientSearchFields=[new searchField{'name':'keywords', 'type':'textmatch'}, new searchField{...} ]

   self.clientSearchData =  ko.observable();

   <input type="text" placeholder="Keywords" value="" data-bind="value: clientSearchData().keywords">

 and when any search field changes, it can trigger the filter function like

   self.filteredRecords = ko.computed(function() {

     return ko.utils.arrayFilter(self.items, function(r) {

            ko.utils.arrayForEach(self.clientSearchFields(), function(item) {

              if(self.clientSearchData() && self.clientSearchData()[item.name] && self.clientSearchData()[item.name].length>0){

                 .....

              }

            });

            .....

        });

  basically, I don't want to hardcode any search field name in the ViewModel.    

  Is there a way?

  Thanks

[noirabys]

hi,

wrap the fields into a observableArray:

function searchField(data){

  var self = this;

  self.name = data.name;

  self.type = data.textmatch;

}

 self.clientSearchFields=ko.observableArray([new searchField({'name':'keywords', 'type':'textmatch'}), new searchField({...})... ]);

add a read call to "keywords" property to your computed ( that will add the dependency )

the computed will automatically reavaluated on adding a searchfield, or changing of the keywords property

best regards,

 noirabys

[yx weng]

Thanks.

But how do I reference those fields by key, I need reference them with something like

self.clientSearchFields[0] or self.clientSearchFields['keywords']

not something like

self.clientSearchFields.keywords

since the field names are not static.

I think I need reference them in computed field, and also need reference them in search html like input 

[Gunnar Liljas]

You certainly can, by traversing the array, but I wonder why you need to access them directly..

[yx weng]

Ok, I didn't explain it clearly.

So I have a list of search fields, if I need display keywords search box on one place, and age search box on another.  What data-bind I can use?

If the field is static, I can add something like 

<input class="form_field_input" type="text" placeholder="Keywords" value="" data-bind="value: filter_keywords ">

but since the fields are dynamic, I would like to add like

<input class="form_field_input" type="text" placeholder="Keywords" value="" data-bind="value: filters['keywords'] ">

If I can do like that, how do I put it in computed so changes can be pick

   self.filter=ko.computed(function(){

     var v='';

     for(var searchField in searchFields){  //  'keywords' in one item in searchFields

       v += filters[searchField.name];   

     }

    ....

I tested with code like that, but seems the changes didn't trigger the computed.