I have an observe set up on a property that populates/filters a list of company names as the user is typing. Once the list has been narrowed down the user can click on one of the items in the list. It is sort of like an auto complete with some differences to make it work how I want it to on mobile devices. When the users starts typing all other controls on the form are hidden when the user selects a company name the list is hidden and the other fields are shown again, there is also a button that will close the list and show the other controls without the user selecting a company. Everything works perfect except I have been unable to prevent the observer from firing when the user selects a company and the company name property that has the observer is set in the action that runs on selecting the company.
Here is the part of the handle bars template:
{{#each account in accounts}}
<div class="small-12 columns trim"style="background-color:white">
<a href="#" {{action selectAccount account}}>{{account.name}}</a>
</div>
{{/each}}
Here is the relevant code from the coffee script controller:
companyName: ''
lastResponse: 0
accounts: null
accountSearchStyle:'display:none'
standardControlStyle: 'display:block'
isSearch: false
searchObserver: Ember.observer('companyName', () ->
Ember.run.debounce(@, @searchAction, 500)
)
# Do a search
searchAction: () ->
@loadPage(@get('companyName'))
loadPage: (companyName) ->
controller = @
if companyName != '' && controller.get('isSearch') == false
@set('accountSearchStyle', 'display:block')
@set('standardControlStyle', 'display:none')
@set('isSearch', 'true')
actions:
cancelAccountSearch: () ->
controller = @
controller.set('selectedAccount', null)
controller.set('accountSearchStyle', 'display:none')
controller.set('standardControlStyle', 'display:block')
controller.set('isSearch', false)
selectAccount: (account) ->
controller = @
controller.set('companyName', account.name)
controller.set('selectedAccount', account)
controller.set('accountSearchStyle', 'display:none')
controller.set('standardControlStyle', 'display:block')
controller.set('isSearch', false)
)
I am not too sure what is going on, I tried setting another flag to disallow any of it running and setting that flag back at the very end, however somehow after the very last line in selectAccount: controller.set('isSearch', false) is run the observer fires again and does it's thing and I end up with the search controls showing again. So to be specific, it goes back to the normal controls for a second and then the search controls are shown again. I am not sure if there is something wrong in my code or if I need to find a way to remove the observer and add it back after I am done. I have been banging my head against it for hours so hopefully someone can shed some light on it for me. Thanks.
Aucun commentaire:
Enregistrer un commentaire