返回模板中行和列的索引 Table
Returning Index of Row & Col in the Template Table
我有一个动态的 table,它是我通过 Handlebars.js
创建的作为模板,问题是我无法将 id 分配给每个表示其位置的单元格,如行和列。我有下面的模板,
<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 或 table 本身的时候我打算。
我打开任何建议,例如 JQuery
而不是 Handlebars.js
您可以使用块参数: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
节点下:
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));
<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>
然后为了从tr节点获取id:
$(tr).data('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;
});
然后使用如下方式设置 ID:
<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>
这里是一个片段,展示了这种方法的实际应用:
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>
我有一个动态的 table,它是我通过 Handlebars.js
创建的作为模板,问题是我无法将 id 分配给每个表示其位置的单元格,如行和列。我有下面的模板,
<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 或 table 本身的时候我打算。
我打开任何建议,例如 JQuery
而不是 Handlebars.js
您可以使用块参数: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
节点下:
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));
<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>
然后为了从tr节点获取id:
$(tr).data('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;
});
然后使用如下方式设置 ID:
<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>
这里是一个片段,展示了这种方法的实际应用:
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>