把手 - 不是每个都有的

Question

我正在为项目使用把手，我有一个包含10个项目的数据文件。我正在使用'each'命令在一个页面上显示它们（工作正常）但是对于另一个页面我只想显示前4个项目。我怎样才能做到这一点？提前谢谢！

Answer 1

您可以使用{{#each}}循环中的@index变量和将测试@index值的自定义帮助程序来完成此操作。请查看下面的代码段以满足您的需求。

＆＃13;

＆＃13;

$(document).ready(function () {
  var context = {
    "items" : [{"name":"item1"},{"name":"item2"},{"name":"item3"},{"name":"item4"},{"name":"item5"},{"name":"item6"},{"name":"item7"},{"name":"item8"},{"name":"item9"},{"name":"item10"},{"name":"item11"},{"name":"item12"},{"name":"item13"}]
  };
  Handlebars.registerHelper('test', function(lvalue, operator, rvalue, options) {
	var doDisplay = false;
	var items = (""+rvalue).split("|");
	var arrayLength = items.length;
	for (var i = 0; (i < arrayLength); i++) {
		if (operator == "eq") {
	    	if (lvalue == items[i]) {
	    		doDisplay = true;
	    	}
	    } else if (operator == "ne") {
	    	if (lvalue != items[i]) {
	    		doDisplay = true;
	    	}
	    } else if (operator == "gt") {
	    	if (parseFloat(lvalue) > parseFloat(items[i])) {
	    		doDisplay = true;
	    	}
	    } else if (operator == "lt") {
	    	if (parseFloat(lvalue) < parseFloat(items[i])) {
	    		doDisplay = true;
	    	}
	    }else if (operator == "le") {
	    	if (parseFloat(lvalue) <= parseFloat(items[i])) {
	    		doDisplay = true;
	    	}
	    }else if (operator == "ge") {
	    	if (parseFloat(lvalue) >= parseFloat(items[i])) {
	    		doDisplay = true;
	    	}
	    }
	}
    if (doDisplay) {
    	return options.fn(this);
    } else {
    	return "";
    }
});
  var source = $("#sourceTemplate").html();
  var template = Handlebars.compile(source);
  var html = template(context);
  $("#resultPlaceholder").html(html);



});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
  Complete list<br/>
  <ul>
    {{#each items}}
    <li>
      {{@index}} {{name}}
    </li>
    {{/each}}
  </ul>
  Partial list<br/>
  <ul>
    {{#each items}}
      {{#test @index 'lt' 4}} 
      <li>
        {{@index}} {{name}}
      </li>
      {{/test}}
    {{/each}}
  </ul>
</script>

<div id="resultPlaceholder">
</div>

＆＃13;

＆＃13;

＆＃13;