Блог

У меня есть пользовательский плагин jquery, который используется для создания выпадающего HTML-кода для окна поиска. Внутри этого html создается следующим образом.

 $.each(stack, function (i, stackItem) {
                    var url = _getItemURL(stackItem, lang);

                    if (stackItem.INS !== undefined) {
                        html  = '<li class="row"> <a href="'   url   '">'   stackItem.DS_HIGHLIGHTED   ' - '   stackItem.E   '<br>'   stackItem.TICKER_DESC   '</a> </li>';
                    } else {
                        html  = '<li class="row"> <a href="'   url   '">'   stackItem.COMPANY_DESC_HIGHLIGHTED   '<br>' /*  _getCountry(stackItem.CC, lang)*/   '</a> </li>';
                    }
                    itemCount  ;
              });
  

Как вы можете видеть, атрибут href используется для создания ссылок в этом html. Но когда пользователь нажимает на эти ссылки, приложение перезагружает страницу браузера. Я хочу, чтобы он правильно отображался на другой маршрут в приложении, как в файлах hbs, следующим образом

 <li> {{#link-to 'stock-overview' 'en' 'tdwl' '1010'}}Stock{{/link-to}} </li>
  

Как я могу сгенерировать подобный html внутри предыдущего кода Java script.

Цените любую помощь?

Во-первых, я бы рекомендовал вам подумать, действительно ли вам нужен этот плагин jQuery или вы можете использовать простое решение ember. Есть несколько довольно причудливых дополнений, таких как ember-power-select.

Но если вы действительно хотите это сделать, вам нужно понимать, что a {{#link-to}} не только генерирует <a> тег, но и обрабатывает только клики по нему, а затем выполняет a transitionTo .

Так что нет, это невозможно сделать, когда вы просто добавляете HTML в DOM. Вам пришлось бы перехватывать click события в <a> тегах вручную, а затем запускать переход. Это немного зависит от того, как вы вводите html его в DOM.

Одна вещь, которую вы могли бы сделать, это создать уникальный id для каждого <a> тега, и после того, как вы вставили html в DOM, вы находите <a> теги по id и прикрепляете onclick событие.

Лучшим способом было бы создать DOM вместо HTML, поэтому вручную вызовите document.createElement , а затем присоедините click событие.

Чтобы запустить переход, вы можете сделать что-то подобное внутри любого объекта, в который введен владелец (например, компонент):

 Ember.getOwner(this).lookup('controller:application').transitionToRoute('stock-overview', 'en', 'tdwl', '1010');
  

Однако чисто лучшим решением было бы использовать шаблон ember handlebars и {{#each}} цикл вместо решения jQuery. Однако, чтобы рассказать вам, как это сделать, нам нужно больше информации. Поэтому лучше всего, вероятно, задать новый вопрос и точно объяснить, чего вы хотите достичь, а теперь спросить о возникшей у вас проблеме с, вероятно, неправильным решением для другой проблемы.