三元运算符和 Twitter Typeahead

Question

我正在使用 Twitter Typeahead，到目前为止一切顺利。我能够 return 可用性、标题、作者和 description 在搜索建议中。现在我只是想在搜索栏中的文本 returned 中添加一个 css 标签 (success/warning)，但是我不确定我需要使用什么语法，例如；

如果可用 <span class="label label-success">available</span>

如果不可用 <span class="label label-success">unavailable</span>

我的 json 文件中的可用性字段 returns 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

您可以创建一个包含如下逻辑的 Book javascript 对象：

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>'
    )

三元运算符和 Twitter Typeahead

Ternary Operator and Twitter Typeahead

javascript

jquery

html

twitter-bootstrap

twitter