Ternary Operator and Twitter Typeahead

Question

Я работаю с Twitter Typeahead, и все идет хорошо. Я могу вернуть наличие, название, автор и описание в предложениях для поиска. Теперь я просто пытаюсь добавить метку css (успех/предупреждение) в текст, возвращенный в строке поиска, но я не уверен, какой синтаксис мне нужно использовать, например;

Если доступен<span class="label label-success">available</span>

Если недоступного<span class="label label-success">unavailable</span>

Поле наличия в моем JSon возвращается файлы 1 свободных и 0 для недоступны. Я пробовал синтаксис, такой как следующий, но он не работает - он просто распечатывает html;

available: (available == 1) ? '<span class="label label-success">available</span>' : '<span class="label label-warning">unavailable</span>' 

В моих typeahead.js Я использую следующий шаблон для отображения результатов;

filter: function(list) { 
    return $.map(list, function(book) { 
     return { 
     title: book.title, 
     author: book.author, 
     available: book.available, 
     description: book.description 
     }; 
    }); 
} 

... 

$('.demo .typeahead').typeahead(null, { 
    displayKey: 'title', 
    engine: Handlebars, 
    templates: { 
    empty: [ 
     '<div class="empty-message">', 
     'no results found', 
     '</div>' 
    ].join('\n'), 
    suggestion: Handlebars.compile(
     '<p>{{available}}</p> \n\ //this is the line I want to add the label-badge to 
     <p>{{title}}</p> \n\ 
     <p>{{author}}</p> \n\ 
     <p>{{description}}</p>' 
     ) 
    }, 
    engine: Handlebars, 
    source: books.ttAdapter() 
}); 

Очень новый для JS здесь, поэтому любой совет приветствуется. При необходимости я могу предоставить больше кода.

Answer 1

Вы можете создать JavaScript Object Book, который будет содержать логику следующим образом:

var Book = function(data) 
{ 
    self = this; 
    self.title = data.title; 
    self.author = data.author; 
    self.available = data.available;   
    self.description = data.description; 
    self.availableHtml = function() 
    { 
     return (self.available == 1) ? '<span class="label label-success">available</span>' : '<span class="label label-warning">unavailable</span>' 
    } 
} 

Затем отобразить его следующим образом:

filter: function(list) { 
    return $.map(list, function(book) { 
     return new Book({ 
     title: book.title, 
     author: book.author, 
     available: book.available, 
     description: book.description 
     }); 
    }); 
} 

И изменить руль компилировать к этому:

suggestion: Handlebars.compile(
     '<p>{{{availableHtml}}}</p> \n\ //this is the line I want to add the label-badge to 
     <p>{{title}}</p> \n\ 
     <p>{{author}}</p> \n\ 
     <p>{{description}}</p>' 
     ) 

Обновление

Я думаю, что ответ, возможно, был проще, чем я изначально думал.

Если вам просто нужно, чтобы избежать HTML, использовать три скобки, т.е.

suggestion: Handlebars.compile(
    '<p>{{{available}}}</p> \n\ //this is the line I want to add the label-badge to 
    <p>{{title}}</p> \n\ 
    <p>{{author}}</p> \n\ 
    <p>{{description}}</p>' 
    )