Question

我在一个属性上设置了一个观察设置，用于在用户输入时填充/过滤公司名称列表。缩小列表后，用户可以单击列表中的某个项目。它有点像一个自动完成，有一些差异，使它在移动设备上的工作方式。当用户开始键入时，表单中的所有其他控件都被隐藏，当用户选择公司名称时，列表被隐藏，其他字段再次显示，还有一个按钮将关闭列表并显示其他控件而无需用户选择一家公司。一切都很完美，除非我无法阻止观察者在用户选择公司时触发，并且在选择公司时运行的操作中设置了具有观察者的公司名称属性。

以下是句柄栏模板的一部分：

{{#each account in accounts}}
    <div class="small-12 columns trim"style="background-color:white">
        <a href="#" {{action selectAccount account}}>{{account.name}}</a>
    </div>
{{/each}}

以下是来自咖啡脚本控制器的相关代码：

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)
)

我不太确定发生了什么，我尝试设置另一个标志来禁止其中任何一个运行并在最后设置该标志，但不知何故在selectAccount的最后一行之后：controller.set（'isSearch '，false）运行观察者再次点火并做它的事情，我最终再次显示搜索控件。所以具体来说，它会回到正常控件一秒钟，然后再次显示搜索控件。我不确定我的代码是否有问题，或者我是否需要找到一种方法来删除观察者并在完成后将其添加回来。我一直在敲打它几个小时，所以希望有人可以为我揭开它。感谢。

Answer 1

我不确定我是否完全理解这个问题，但是你说“我无法阻止观察者射击”，那么如何根据需要添加/删除观察者呢？

addCompanyNameObserver: function() {
  this.addObserver('companyName', this.searchAction);
},

removeCompanyNameObserver: function() {
  this.removeObserver('companyName');
},

...

loadPage: function() {
  ...
  this.addCompanyNameObserver();
},

cancelAccountSearch: function() {
  ...
  this.removeCompanyNameObserver();
}

Answer 2

我以为我会发布我发现的解决方案可能不是完美的方法，但它有效。在实际观察者中添加标志：

searchObserver: Ember.observer('companyName', () ->
    if @get('allowSearch')
        Ember.run.debounce(@, @searchAction, 500)
)

并在此处设置：

    selectAccount: (account) ->
        controller = @
        @set('allowSearch', false)
        controller.set('companyName', account.name)
        controller.set('selectedAccount', account)
        controller.set('accountSearchStyle', 'display:none')
        controller.set('standardControlStyle', 'display:block')
        controller.set('isSearch', false)
        @set('allowSearch', true)

解决我的问题。在去抖动导致问题的原因之后，看起来像是检查旗帜。

防止Ember观察者在方法

2 个答案: