Служит для прослушивания Ember Computed Property List после первого успешного возврата

Question

У меня проблема с вычисляемым свойством Ember: Кажется, что как только шаблон обновляется, он перестает слушать изменения в свойстве зависимостей. Но я не понимаю, почему это так.

Вот мой шаблон:

{{input type="text" value=searchText placeholder="Search for users..."}} 
    <br> 
    <ul> 
     {{#each user in searchResults}} 
     <li>{{user.Handle}}</li> 
     {{else}} 
     <p>No users found.</p> 
     {{/each}} 
    </ul> 

А ниже мой контроллер:

App.AutocompleteController = Ember.Controller.extend({ 
    searchText: null, 
    searchResults: function() { 
     var searchText = this.get('searchText'); 
     var data = { 'searchTerm' : searchText }; 
     var self = this; 
     alert("Calling searchResults"); 
     if (!searchText) { return; } 
     if (searchText.length < 2) { return; } 
     $.get('/searchUsers', data).then(function (response) { 
       self.set("searchResults", JSON.parse(response)); 
      }); //end then 
    }.property('searchText') 
}); 

В первый раз SearchResults на самом деле делает вызов и возвращает данные AJAX, результаты автозаполнения получить заселены, но после того, , searchResults не вызывается снова, пока я не обновляю клиент.

Answer 1

НИКОГДА НЕ РАЗУМ. Это прямо в коде. При успешном ajax-коде я переназначаю searchResults в статический массив, больше не являющийся функцией.

Возврат не будет работать из. Then, тем не менее, поэтому мне все еще нужно обходное решение для возврата данных. Для этого, я добавлю более традиционный Ember слушателя событий, чтобы назвать свою функцию «поиск», который сбросит свойство

Новый шаблон «SearchResults»:

{{input type="text" value=searchText placeholder="Search for users..." action=search on='change'}} 

<ul> 
    {{#each user in searchResults}} 
    <li>{{user.Handle}}</li> 
    {{else}} 
    <p>No users found.</p> 
    {{/each}} 
</ul> 

Новый контроллер:

App.AutocompleteController = Ember.Controller.extend({ 
searchText: null, 
search: function() { 
    var searchText = this.get('searchText'); 
    var data = { 'searchTerm' : searchText }; 
    var self = this; 
    if (!searchText) { return; } 
    if (searchText.length < 2) { return; } 
    else { 
    $.get('/searchUsers', data).then(function (response) { 
      self.set("searchResults", JSON.parse(response)); 
     }); //end then 
    } 
}.property('searchText') 

});