Skip to content

Instantly share code, notes, and snippets.

@dre3s
Last active January 12, 2016 18:07
Show Gist options
  • Save dre3s/ed6da68e1a52e10ff106 to your computer and use it in GitHub Desktop.
Save dre3s/ed6da68e1a52e10ff106 to your computer and use it in GitHub Desktop.
my.js.underscore.tpl.settings

UnderscoreJs - Template Settings

  var templateHtml = this.$el.html(),                                                                              |      <span class="item-duration">{{= item.duration }}</p>                                  
  content = {                                                                                                      |      </a>                                                                                  
    item: this.item.attributes                                                                                     |      <div class="item-info">                                                               
  },                                                                                                               |        <p class="item-sectionName">                                                        
  tplSetting = {                                                                                                   |          <a href="{{= item.sectionUrl }}">                                                 
    interpolate : /\{\{\=(.+?)\}\}/g,                                                                              |            {{= item.sectionName }}                                                         
    evaluate: /\{\{(.+?)\}\}/g                                                                                     |          </a>                                                                              
  },                                                                                                               |        </p>                                                                                
  template = _.template(templateHtml, content, tplSetting);  

HTML

<script type="text/template" id="item-thumb">                                                
  <li class="item-thumb">                                                                                              
    <div class="item-wrap">                                                                                            
      <a href="{{= item.url }}">                                                                                       
      <img class="item-img" src="{{= item.coverImage }}" width="200">                                                  
      <h3 class="item-title"><{{= item.title }}</h3>                                                                   
      <span class="item-duration">{{= item.duration }}</p>                                                             
      </a>                                                                                                             
      <div class="item-info">                                                                                          
        <p class="item-sectionName">                                                                                   
          <a href="{{= item.sectionUrl }}">                                                                            
            {{= item.sectionName }}                                                                                    
          </a>                                                                                                         
        </p>                                                                                                           
        <p class="item-time">{{= item.time }}</p>                                                                      
      </div>                                                                                                           
    </div>                                                                                                             
  </li>                                                                                                                
</script>  
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment