логика, основанная на результатах усов в algolia

Question

Если у меня есть усы атрибут сказать {{stockvalue}}, и я хотел бы различные классы в окружающем DIV на основе значения {{stockvalue}} сказать:

<div class="label-success">{{stockvalue}}</div> 

если над 0 и

<div class="label">{{stockvalue}}</div> 

, если 0

РЕДАКТИРОВАТЬ 10 ​​ноября-2016

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

function app(opts) { 
    var search = instantsearch({ 
     appId: opts.appId, 
     apiKey: opts.apiKey, 
     indexName: opts.indexName, 
     urlSync: true, 
     searchFunction: function(helper) { 
      var searchResults = $('.search-results'); 

      helper.search(); 
      searchResults.show(); 
     } 
    }); 

    search.addWidget(
    instantsearch.widgets.searchBox({ 
     container: '#search-input', 
     placeholder: 'Hvad søger du efter?' 
    }) 
); 

    search.addWidget(
    instantsearch.widgets.hits({ 
     container: '#hits', 
     hitsPerPage: 5, 
     templates: { 
      item: getTemplate('hit'), 
      empty: getTemplate('no-results') 
     } 
    }) 
); 

    search.addWidget(
    instantsearch.widgets.stats({ 
     container: '#stats' 
    }) 
); 

    search.addWidget(
    instantsearch.widgets.sortBySelector({ 
     container: '#sort-by', 
     autoHideContainer: true, 
     indices: [{ 
     name: opts.indexName, label: 'Relevans' 
     }, { 
     name: 'price_asc', label: 'Laveste pris' 
     }, { 
     name: 'price_desc', label: 'Højeste pris' 
     }] 
    }) 
); 

    search.addWidget(
    instantsearch.widgets.pagination({ 
     container: '#pagination', 
     scrollTo: '#search-input' 
    }) 
); 

    search.addWidget(
    instantsearch.widgets.refinementList({ 
     container: '#category', 
     attributeName: 'primary-cat', 
     showMore: true, 
     showMore: { limit: 30, templates: { active: 'Vis mindre', inactive: 'Vis mere' } }, 
     sortBy: ['isRefined', 'count:desc', 'name:asc'], 
     operator: 'or', 
     limit: 10, 
     templates: { 
     header: getHeader('Kategorier') 
     } 
    }) 
); 

/* search.addWidget(
    instantsearch.widgets.refinementList({ 
     container: '#brand', 
     attributeName: 'brand', 
     sortBy: ['isRefined', 'count:desc', 'name:asc'], 
     limit: 10, 
     operator: 'or', 
     templates: { 
     header: getHeader('Brand') 
     } 
    }) 
); 
*/ 
    search.addWidget(
    instantsearch.widgets.rangeSlider({ 
     container: '#price', 
     attributeName: 'price', 
     templates: { 
      header: getHeader('Pris') 
     }, 
     step: 10, 
     max: 5000 
    }) 
); 

Этот Javascript извлекает данные stockvalue и применяет его на HTML, но я не вижу никакого способа, чтобы сделать какой-либо логики в переменной stockvalue, как она никогда не присутствует в этом JavaScript.

Answer 1

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

Вот как это сделать с помощью опции transformData виджет, который позволяет вам настроить ваши хиты данные на шаблонам необходимо перед визуализацией:

search.addWidget(
    instantsearch.widgets.hits({ 
     container: '#hits', 
     hitsPerPage: 5, 
     transformData: { 
     item: function(hit) { 
      hit.stockValueClass = hit.stockvalue > 0 ? 'label-success' : 'label'; 
      return hit; 
     } 
     }, 
     templates: { 
      item: getTemplate('hit'), 
      empty: getTemplate('no-results') 
    } 
    }) 
); 

Вы можете использовать значение stockValueClass внутри шаблона:

<div class="{{stockValueClass}}">{{stockvalue}}</div> 

Answer 2

Вы не можете использовать тройные операторы в MustacheJs, так как он безболезнен. Однако есть несколько вариантов: добавление значения в объект на основе его значения, а затем рендеринг его как class="{{className}}" или аналогичный ... Или использовать javascript, как только вы просмотрели представление, как показано ниже.

Вариант 1 ... (Не забудьте обернуть переменную объекта усов! Это пример логики!)

Посмотреть

<div class="{{class}}">{{stockvalue}}</div> 

Javascript

var class; 
    if (stockvalue > 0) { 
     class = "label-success"; 
    } else { 
     class = "label"; 
    } 

Вариант 2 ...

Посмотреть

<div id="rendered">{{stockvalue}}</div> 

Javascript

if (stockvalue > 0) { 
    document.getElementById("rendered").className = "label-success"; 
} else { 
    document.getElementById("rendered").className = "label"; 
} 

Answer 3

Таким образом, вы ваш объект данных усов определяется как:

var mustacheData = {"stockvalue":50} 
mustacheData['stockvalue_class'] = function(){ 
    if (this['stockvalue'] > 0) { return "label label-success"; } 
    else { return "label"; } 
} 

Затем в шаблоне HTML вы это делаете:

<div class="{{stockvalue_class}}">{{stockvalue}}</div>