基于小胡子的逻辑导致 algolia

Question

如果我有小胡子属性说 {{stockvalue}} 并且我想根据 {{stockvalue}} 的值在周围 div 中使用不同的类说：

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

如果超过 0 并且

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

如果 0

编辑 2016 年 11 月 10 日

据我所知，你们都提交了一些很好的解决方案，但我的问题是我将它与 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

您不能在 MustacheJs 中使用三元运算符，因为它是无逻辑的。但是，有几个选项，可以根据对象的值将值添加到对象中，然后将其渲染为 class="{{className}}" 或类似的......或者在渲染视图后使用 javascript ，如下所示....

选项1...（记得在mustache对象中包裹变量！这是一个逻辑示例！）

查看

<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 2

所以你的小胡子数据对象定义如下：

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>

Answer 3

这两个答案都是解决您的问题的很好的基础，您唯一缺少的是将其与 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>

基于小胡子的逻辑导致 algolia

logic based on moustache results in algolia

javascript

mustache

algolia