Question

我的代码主题是我有一个用户输入搜索字符串的应用程序，在提交时，应用程序重定向到另一个应用程序（使用emberjs创建）。在这里，我们使用bootstrap和搜索框创建了一个下拉列表（$（＆＃39; #query＆＃39;））。需要使用搜索字符串填充搜索框，并且需要将下拉列表设置为某个选项。

didInsertElement是由emberjs提供的回调，searchStringChanged是观察searchString（在url中）的观察者，并使用更新的searchString重新填充搜索框。

我当前的控制器代码如下：

App.PortfoliosIndexController = Ember.ArrayController.extend(                                                                               
  queryParams: ['search_string']
  search_string: null

  filteredPortfolios: (->
    search_string = @get("search_string")
    results = @get('content')

    if search_string
      results = results.filter((portfolio) ->
        portfolio.get('portfolio_name').toLowerCase().indexOf(search_string.toLowerCase()) > -1
    )
    results
  ).property('content', 'search_string')
)

我当前的ember视图代码如下：

App.PortfoliosListView = Ember.View.extend(Ember.PaginationMixin,
  templateName: 'portfolios/list'

  itemsPerPage: 5

  modifySelectBox: ->
    $('#query').val @searchString
    $(".dropdown-menu ul li").removeClass "selected"
    $(".dropdown-menu ul li:nth-child(2)").addClass "selected"
    $(".filter-option").text $(".dropdown-menu ul li.selected a span").text()
    $("#category").get(0).selectedIndex = 1

  searchStringChanged: (->
    ###
    $('#query').val @searchString
    $(".dropdown-menu ul li").removeClass "selected"
    $(".dropdown-menu ul li:nth-child(2)").addClass "selected"
    $(".filter-option").text $(".dropdown-menu ul li.selected a span").text()
    $("#category").get(0).selectedIndex = 1
    ###
    modifySelectBox()
  ).observes 'searchString'

  didInsertElement: ->
    ###
    $('#query').val @searchString
    $(".dropdown-menu ul li").removeClass "selected"
    $(".dropdown-menu ul li:nth-child(2)").addClass "selected"
    $(".filter-option").text $(".dropdown-menu ul li.selected a span").text()
    $("#category").get(0).selectedIndex = 1
    ###
    modifySelectBox()
)

我删除了重复的代码并将其移动到我想从回调和观察者调用的modifySelectBox方法，但修改不起作用。如何删除重复？

Answer 1

您可以在ember中链接观察者和事件挂钩。这是它的外观。

 modifySelectBox: function() {
   $('#query').val(this.get('searchString');
   $(".dropdown-menu ul li").removeClass('selected');
   $(".dropdown-menu ul li:nth-child(2)").addClass('selected');
   $(".filter-option").text($(".dropdown-menu ul li.selected a span").text());
   $("#category").get(0).selectedIndex = 1;
 ).observes('searchString').on('didInsertElement')

重构EmberJS通过删除重复的jquery代码来查看

1 个答案: