Question

我有一个动态表格，我通过Handlebars.js作为模板创建，问题是我不能将id分配给每个表示其位置为row＆amp; amp;山坳。我有下面的模板，

<script id="td-template" type="text/x-handlebars-template">
    {{#each ships}}
    <tr>
        <td class='left-aligned'>{{this.name}}</td>
        <td class="default" id="id{{@index}}"></td>
        <td class="default" id="id{{@index}}"></td>
        <td class="default" id="id{{@index}}"></td>
        <td class="default" id="id{{@index}}"></td>
        <td class="default" id="id{{@index}}"></td>
        <td class="default" id="id{{@index}}"></td>
        <td class="default" id="id{{@index}}"></td>
        <td class="default" id="id{{@index}}"></td>
    </tr>
    {{/each}}
</script>

首先返回0，第二次循环返回1，反之亦然。我需要的是添加一个公式，而不是 {{@ index}} ，但它不会让我添加就像我打算打破html或表本身一样。

我打开了JQuery之类的任何建议，而不是Handlebars.js

Answer 1

您可以使用块参数：http://handlebarsjs.com/block_helpers.html#block-params

与数据属性一起：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

同样要执行算术运算，您必须定义一个帮助器：http://handlebarsjs.com/#helpers

另外，我会移动id节点下的tr：

＆＃13;

Handlebars.registerHelper("eval", function() {
  let args = Array.from(arguments);
  args.pop(); //remove the unwanted object from args list
  return eval(args.join(''));
});

var context = {
  ships: [{
    name: 'battleship',
    id: 1,
    column0: 'says',
    column1: 'hello',
    column2: 'world'
  }, {
    name: 'titanic',
    id: 2,
    column0: 'yields',
    column1: 'hi',
    column2: 'world'
  }]
};

$('#dropzone').append(Handlebars.compile($("#td-template").html())(context));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"></script>

<script id="td-template" type="text/x-handlebars-template">
  {{#each ships as |ship i|}}
  <tr data-id="{{ship.id}}">
    <td class="left-aligned" data-id="{{eval i '*4' }}">{{ship.name}}</td>
    <td class="default" data-id="{{eval i '*4+1' }}">{{ship.column0}}</td>
    <td class="default" data-id="{{eval i '*4+2' }}">{{ship.column1}}</td>
    <td class="default" data-id="{{eval i '*4+3' }}">{{ship.column2}}</td> 
  </tr>
  {{/each}}
  
</script>

<table id="dropzone"></table>

＆＃13;

然后为了从tr节点获取id：

$(tr).data('id');

Answer 2

您可以定义辅助函数，如下所示：

<script id="td-template" type="text/x-handlebars-template">
    {{#each ships}}
    <tr>
        <td class='left-aligned'>{{this.name}}</td>
        <td class="default" id="id{{multiply @index 1}}"></td>
        <td class="default" id="id{{multiply @index 2}}"></td>
        <td class="default" id="id{{multiply @index 3}}"></td>
        .....
    </tr>
    {{/each}}
</script>

然后使用以下内容设置ID：

var columnsCount = 3; // change this to the total number of columns per row in your table.
Handlebars.registerHelper("multiply", function(index, count){
    return (index * columnsCount) + count;
});

var context = {
  ships: [{
    name: 'ship one'
  }, {
    name: 'ship two'
  }]
};

$('#rendered').append(Handlebars.compile($("#td-template").html())(context));

这是一个剪辑，展示了这种方法：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"></script>

<script id="td-template" type="text/x-handlebars-template">
    <table>
      <tbody>
        {{#each ships}}
        <tr>
            <td class='left-aligned'>{{this.name}}</td>
            <td class="default" id="id{{multiply @index 1}}">column {{multiply @index 1}}</td>
            <td class="default" id="id{{multiply @index 2}}">column {{multiply @index 2}}</td>
            <td class="default" id="id{{multiply @index 3}}">column {{multiply @index 3}}</td>
            <!-- and so on.... -->
        </tr>
        {{/each}}
      </tbody>
    </table>
</script>

<div id="rendered"></div>

{{1}}

行和指数的返回Col在模板表

2 个答案: