Question

如果我有一个小胡子属性说{{stockvalue}}，我想根据{{stockvalue}}的值说明周围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集成的方法。

以下是使用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>

基于胡子的逻辑导致了algolia

3 个答案: