![](/img/trans.png)
[英]AngularJS: Creating a class that I can use in my app.js file to use hyperlink pictures
[英]Can I use a handlebars template in my app.js file
我正在制作一个投资组合页面,我想要一张逐渐消失的图片,并在其后面显示有关图片的文字。 我实现了对数据进行硬编码。
像这样。
index.html
<div class="col-sm-6">
<h4>Freelance Work</h4>
<img src="/images/andersen.png" class="portfolio_pic" id="test_pic">
<div id="test_text">
<p>Site for a structural engineer.</p>
<p><strong>Languages:</strong> JavaScript, HTML, CSS</p>
<p><strong>Other:</strong> Git, Bootstrap, GoDaddy Hosting</p>
</div>
<p><a href="https://andersen-engineering.com/">Andersen Engineering</a></p>
<p><a href="https://github.com/nwimmer123/david-excel">GitHub Link</a></p>
</div>
styles.css
#test_text {
margin-top: -220px;
min-height: 210px
}
#test_pic {
max-height: 250px;
border: medium groove #660033;
}
app.js
$('.test_text').hide();
$('.test_pic').hover(function () {
$(this).stop().animate({
opacity: .1
}, 200);
$('.test_text').show();
}, function () {
$(this).stop().animate({
opacity: 1
}, 500);
$('.test_text').hide();
});
问题是当我使用此代码从猫鼬数据库中引入相同信息时
index.html
<div class="col-sm-6">
<div class="list-group" id="portfolio_items-list">
<script id="portfolio_items-template" type="text/x-handlebars-template">
{{#each portfolio_items}}
<h4>{{title}}</h4>
<img src={{image}} class="portfolio_pic" id="test_pic">
<div id="test_text">
<p>{{description}}</p>
<p><strong>Languages: </strong>{{language}}</p>
<p><strong>Frameworks: </strong>{{framework}}</p>
<p><strong>Libraries: </strong>{{library}}</p>
<p><strong>Database: </strong>{{database}}</p>
<p><strong>Other: </strong> {{other}}</p>
</div>
<p><a href={{sitelink}}>{{sitename}}</a></p>
<p><a href={{githublink}}>GitHub Link</a></p>
{{/each}}
</script>
</div>
</div>
app.js
var source = $('#portfolio_items-template').html();
var template = Handlebars.compile(source);
//get all database items
$.get(baseUrl, function (data) {
var dataHtml = template({ portfolio_items: data});
$("#portfolio_items-list").append(dataHtml);
});
那么test_pic和test_text id没有唯一的ID,因此javascript的hide / show / opacity技巧不起作用。 我在想是否可以将模板引入app.js并加载每个Portfolio_items数据库ID作为hide / show / opacity js代码的唯一ID,那么它可能会起作用。 另一种选择是通过车把模板使唯一ID出现在index / html文件中,然后每次使用硬编码对该ID进行复制时都复制hide / show / opacity js代码,但这不是DRY。
有任何想法吗?
谢谢!
{{@index}}提供了车把中{{each}}
循环的索引,因此您可以执行id="test-pic-{{@index}}
来生成唯一的ID。
FWIW还可以仅通过.css完成创建的效果(请参见下文)。
.container { width:50%; height:250px; overflow: hidden; background: rgba(0, 0, 0, 0.5); transition: all .3s ease; } .container:hover { background: rgba(0, 0, 0, 0.1); } .text { font-size: 2em; opacity: 0; transition: all .3s ease; } .container:hover .text { opacity:1; }
<div class="container"> <div class="text"> <p>hello</p> <p>test</p> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.