BorisMoore / jsviews

Interactive data-driven views, MVVM and MVP, built on top of JsRender templates
http://www.jsviews.com/#jsviews
MIT License
856 stars 130 forks source link

Search with jsview #365

Closed MsDanglar closed 7 years ago

MsDanglar commented 7 years ago

Hi Boris, If you can show a simple way to search. For example i have several records in grid: Name1 Name2 Name3 After i search Name1 of course i see only record with Name1 but if i return to search and insert Name2 not result and I know why. my simple code: var partners = entity.Partners.filter(function (p) { return p.PartnerName == entity.searchTextBox }); $.observable(entity.Partners).remove(0, entity.Partners.length); $.observable(entity.Partners).update(partners); because i already remove a object of course nothing to find. if you can help me to fix a code. Thank you

Paul-Martin commented 7 years ago

Without a more complete example this is a guess based on some assumptions about your template structure and object model. A few things jump out to me:

1) .update is not a valid observable function

$.observable(entity.Partners).update(partners);

should be either

$.observable(entity.Partners).refresh(partners);
or
$.observable(entity).setProperty('Partners', partners);

2) You likely don't need .remove - especially assuming that entity.Partners is an array and that entity.Partners is initialized to a valid array (empty or otherwise) before it is data-linked and you simply update it using .refresh.

3) You haven't provided the template you are using, but you need to ensure that the entity.Partner is data-linked. I suspect you have template code similar to:

{{for Partners }}
   something here
{{/for}}

make sure the {{for}} loop is using data-link syntax {^{for}}

4) It's also possible you are trying to use the same array to both contain the complete list of partners as well as the filtered list of partners. The short version is you can't do that because as you've discovered that will overwrite the complete list after the first refresh. In that case you can either change your object model to have separate arrays containing matches and the complete list and change your template accordingly, or you can add a properties to each partner entity to control visibility and show/hide the partner entity based on whether it is visible. Something like:

entity.Partners.filter(function (p) {
  // partners are visible if there is no text in search box or they match search box text
  return !entity.searchTextBox || p.PartnerName == entity.searchTextBox 
}).forEach(function(p) {
  $.observable(p).setProperty('isVisible', true);
});

with a template such as

{^{for Partners }}
   <div data-link="visible{:isVisible}">
      .... display partner attribute here
   </div>
{{/for}}

Those are my best guesses. Please provide a working jsfiddle example if you need additional help.

BorisMoore commented 7 years ago

@MsDanglar: Paul's reply is very generous, but I had suggested in this previous issue you posted that JsViews Issues is not the appropriate place for general coding difficulties etc.. It is for bug reports and feature requests, etc.

Also I had asked if you could post your previous question to Stack Overflow - but I don't think you have done so. To do so would be appreciated! (Just saying...).

I'll close this issue for now...

MsDanglar commented 7 years ago

Thankyou