Kann ich eine Lenkervorlage in meiner app.js-Datei verwenden

Question

Ich mache eine Portfolio-Seite, und ich möchte ein Bild haben, das verschwindet und den Text über das Bild dahinter anzeigt. Was ich erreicht habe, die Daten hart zu kodieren.

So.

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(); 
    }); 

Das Problem ist, wenn ich in der gleichen Informationen meiner Mungo Datenbank bringen, mit Dieser Code

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); 
    }); 

dann gibt es keine eindeutige IDs für die test_pic sind und test_text ids so die Javascript-hide/show/Undurchsichtigkeit Trick funktioniert nicht. Ich dachte, wenn ich eine Vorlage in die app.js bringen könnte und jede Datenbank-ID portfolio_items als eindeutige ID für den Code hide/show/opacity js laden würde, dann könnte es funktionieren. Die andere Alternative wäre, unique ids in der index/html-Datei über die Lenkervorlage erscheinen zu lassen und dann den hide/show/opacity js-Code jedes Mal mit dieser ID zu kopieren, aber das wäre sehr nicht DRY.

Irgendwelche Ideen?

Danke!

Answer 1

Der Index einer {{each}} Schleife im Lenker ist von {{@index}} verfügbar, sodass Sie so etwas wie id="test-pic-{{@index}} erstellen können, um eindeutige IDs zu generieren.

FWIW Sie können die Effekte, die Sie gerade erstellen, auch nur mit .css ausführen (siehe unten).

.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>