防止在方法中设置属性时触发 Ember 观察者答案

【问题标题】：Prevent Ember observer firing on setting property in method防止在方法中设置属性时触发 Ember 观察者
【发布时间】：2015-10-24 05:44:14
【问题描述】：

我在一个属性上设置了一个观察设置，该属性在用户键入时填充/过滤公司名称列表。一旦列表被缩小，用户可以点击列表中的一项。它有点像一个自动完成，但有一些不同之处，可以让它在移动设备上按照我想要的方式工作。当用户开始键入表单上的所有其他控件时，当用户选择公司名称时，列表被隐藏并且其他字段再次显示，还有一个按钮可以关闭列表并在没有用户的情况下显示其他控件选择公司。一切都很完美，除了当用户选择公司并且在选择公司时运行的操作中设置了具有观察者的公司名称属性时，我无法阻止观察者触发。

这是车把模板的一部分：

{{#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) 运行观察者再次触发并完成它，我最终再次显示搜索控件。所以具体来说，它会回到正常控件一秒钟，然后再次显示搜索控件。我不确定我的代码是否有问题，或者我是否需要找到一种方法来删除观察者并在完成后将其添加回来。我已经把头撞了好几个小时了，所以希望有人能为我解释一下。谢谢。

【问题讨论】：

标签： ember.js coffeescript handlebars.js observer-pattern

【解决方案1】：

我不确定我是否完全理解问题，但您说“我无法阻止观察者触发”，那么根据需要添加/删除观察者怎么样？

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

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

...

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

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

【讨论】：

我认为这可能是这样做的方法，但我还不能让它工作。我是 ember 和 coffeescript 的新手，所以这可能是我做错了。

【解决方案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)

解决了我的问题。看起来去抖动后检查标志是导致问题的原因。

【讨论】：