Question

我想通过使用把手来显示图片，但它没有以正确的方式显示它，如下图所示：

我使用了这段代码：

<script id="entry-template" type="text/x-handlebars-template">
    {{#each list}}
    <tr>
        <td>{{Index}}</td>
        <td>{{Name}}</td>
        <td>{{Email}}</td>
        <td>{{Subject}}</td>
        <td>{{BodyMsg}}</td>

        <td><img {{bind-attr src="Imageurl"}} /></td>
    </tr>
    {{/each}}
</script>

Answer 1

bind-attr是Ember - 具体语法。您无需将其与handlebars一起使用。

var source = $("#entry-template").html(); 
var template = Handlebars.compile(source); 

var list = [{
    Index: 1, 
    Name: 'John',
    Email: 'Smith',
    Subject: 'Why Ember?',
    BodyMsg: 'Something very important',
    Imageurl: 'http://i.stack.imgur.com/sdW0i.jpg'
    }
]; 

$('body').append(template({list: list}));

body {
    font:15px arial,sans-serif;
}
h1 {
    margin: 0 0 10px 0;
    padding: 5px;
    font-size: 24px;
    background-color: #999;
    color: #fff;
}
table {
    margin: 10px;
}
th, td {
    padding: 5px;
    border: 1px solid #999;
}
th {
    background: #ccc;
}
tr:nth-child(odd) {
    background: #eee;
}
td a {
    color: #000;
    text-decoration: underline;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>       
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="entry-template" type="text/x-handlebars-template">
    {{#each list}}
        <tr>
            <td>{{Index}}</td>
            <td>{{Name}}</td>
            <td>{{Email}}</td>
            <td>{{Subject}}</td>
            <td>{{BodyMsg}}</td>

            <td>
                <img src="{{Imageurl}}"/>
            </td>
        </tr>
    {{/each}}
</script>
    
</body>
</html>

Answer 2

我不知道什么是bind-attr。

尝试替换为：

<td><img src={{Imageurl}} /></td>

不显示带把手的图片

2 个答案: