Temahead templating, if/else

Question

спасибо за помощь: Typeahead result formatting, это продолжение.

Моя JSON выглядит

[{ name="Long Island", type="2", id="1234"}, { name="New York", type="1", id="5678"}]

В выпадающем списке, мне нужно, чтобы иметь возможность отделить тип 1 из 2-го типа, так

Тип 1 заголовок

типа 1 статья

тип 1 пункт *

Тип 2 заголовок

типа 2 пункта

типа 2 пункта

Если нет результатов для 1-го типа, то не показывать заголовок. То же самое для типа 2.

Возможно ли это с помощью головки и шаблона двигателя? Я использую Хогана, но я не суетливый.

Answer 1

Способ «Typeahead» состоит в том, чтобы отделить ваш набор данных от двух наборов данных, которые будут возвращать только элементы типа «1», а другой - только элементы «типа 2». В typeahead каждый набор данных может иметь свой собственный header, который будет вести себя именно так, как вы хотите.

$autocomplete.typeahead([{ 
    name: 'location 1', 
    remote: { 
     url: 'http://pathtomysite.com/%QUERY?type=1', 
     dataType: 'jsonp', 
     valueKey: 'name' 
     filter: function (parsedResponse) { return parsedResponse.locations; } 
    }, 
    template: [ 
     '<p class="repo-name">{{name}}</p>', 
     '<p class="repo-description">{{id}}</p>' 
    ].join(''), 
    header: '<b>Type 1</b>' 
    engine: Hogan 
}, { 
    name: 'location 2', 
    remote: { 
     url: 'http://pathtomysite.com/%QUERY??type=2', 
     dataType: 'jsonp', 
     valueKey: 'name' 
     filter: function (parsedResponse) { return parsedResponse.locations; } 
    }, 
    template: [ 
     '<p class="repo-name">{{name}}</p>', 
     '<p class="repo-description">{{id}}</p>' 
    ].join(''), 
    header: '<b>Type 2</b>' 
    engine: Hogan 
}]) 

Answer 2

Учитывая, что у вас нет контроля над частью JSON, у вас есть 2 варианта:

Вариант 1

использования 2 наборов данных, с же запроса. В одном из них filter вернет только записи типа «1», а в другом filter вернет ответы «тип 2».

Это дважды вызовы JSON, поэтому в два раза больше нагрузки на ваш сервер. Клиентская сторона не увидит задержку, хотя, поскольку запросы являются параллельными.

Это хакерское решение, но OTOH оно чистое (с клиентской стороны) и требует очень мало кода.

Вариант 2

Используйте только один набор данных, и поэтому некоторые работы в вашем filter. В принципе, верните массив с записью для заголовка «тип 1», затем все записи типа 1, затем запись для заголовка «тип 2», а затем все записи типа 2.

Массив - это массив объектов. У каждого объекта также будет член class. В записях для заголовков «тип 1» и «тип 2» задайте класс "header" или что-то вдоль линий и:

1) Включите ваш шаблон в класс. 2) Попросите свой CSS сделать класс невыбираемым, неприступным и стилизованным так, как вы этого хотите.

Мне нравится вариант # 1 лучше.