基于胡子的逻辑导致了algolia

Question

如果我有胡子属性说{{stockvalue}},我想根据{{stockvalue}}say 的值在周围div中的不同类:

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

如果超过0和

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

如果为0

编辑10-NOV-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集成的方法.

以下是使用transformDatawidget选项的方法,它允许您在渲染之前根据模板需求调整命中数据:

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>