mobify.js와 두 개의 요소 모음을 결합하십시오.

방금 mobifyjs 툴킷을 사용하기 시작했으며 두 가지 요소 모음을 하나로 결합하는 문제에 봉착했습니다. 나는 텍스트와 이미지가있는 두 가지 링크가 있습니다. HTML처럼 보이는 다음

그것은으로 전환 할 필요가

<!-- links with text --> 
<div id="products"> 
    <a href="Product1">Product 1</a> 
    <a href="Product2">Product 2</a> 
</div> 
... 
<!-- somewhere else on the page --> 
<div id="productImages"> 
    <a href="Product1"><img src="Product1.png /></a> 
    <a href="Product2"><img src="Product2.png /></a> 
</div>

<div class="items"> 
    <div class="item"> 
     <div class="img"> 
      <a href="Product1"><img src="Product1.png /></a> 
     </div> 
     <div class="title"> 
      <a href="Product1">Product 1</a> 
     </div>  
    </div> 
    <div class="item"> 
     <div class="img"> 
      <a href="Product2"><img src="Product2.png /></a> 
     </div> 
     <div class="title"> 
      <a href="Product2">Product 2</a> 
     </div>  
    </div> 
</div>

나의 현재 솔루션은 내가 좋아하는 뭔가를 가지고있는 mobify.konf에서, 그래서 지도를 기능을 사용하는 것입니다 다음 :

'content': function(context) { 
    return context.choose(
     {{ 
      'templateName': 'products', 
      'products': function(){ 
       return $('#productImages a').map(function() { 
        var href = $(this).attr('href') || ''; 

        var div = $('<div class="item"><div class="img"></div><div class="title"></div></div>'); 
        div.find('.img').append($(this).clone()); 
        div.find('.title').append($('#products a[href="' + href + '"]').clone()); 

        return div; 
       }); 
      } 
     }) 
}

그리고 템플릿은 다음과 같습니다

<div class="items"> 
    {#content.products} 
     {.} 
    {/content.products} 
</div>

이 코드는 작동하지만 tmpx 파일에서 mobify.konf로 마크 업 코드 조각을 옮겨야하기 때문에 접근법 자체가 꽤 못 생깁니다. 누구든지 더 나은 해결책을 제안 할 수 있습니까?

출처

2013-02-23 Alex Kiselev

이런 종류의 작업을 수행하는 가장 좋은 방법은 상품의 관련 속성 (예 : 제품 이름, 이미지 URL 및 링크 href)을 자바 스크립트의 데이터 구조로 수집 한 다음 .tmpl 파일의 새로운 html 구조.

<div class="items"> 
{#content.products} 
    <div class="item"> 
     <div class="img"><img src="{.imgSrc}" /></div> 
     <div class="title"><a href="{.href}">{.name}</a></div> 
    </div> 
{content.products} 
</div>

: 다음

'products': function() { 
    var products = [], 
     $productLinks = $('#products a'), 
     $productImages = $('#productImages img') 
     len = $productNames.legnth; 
    for(var i = 0; i<len; i++) { 
     var $link = $productLinks.eq(i); 
     var $img = $productImages.eq(i); 
     products.push({name: $link.text(), href: $link.attr('href'), imgSrc: $img.attr('src')}); 
    } 
    return products; 

}

와 같은 뭔가 마크 업의 관련 장소에 그들을 배열 항목을 반복하고 삽입하여 템플릿

출처

2013-03-18 08:41:27

mobify.js와 두 개의 요소 모음을 결합하십시오.

답변

관련 문제