Question

在身体标签之前

      var wall = new freewall(".freewall");
      wall.reset({
        selector: '.grid-tile',
        animate: false,
            cellW: 200,
          cellH: 'auto',
          delay: 1,
        onResize: function() {
          wall.fitWidth();
          wall.refresh();
        }
      });
         wall.fitWidth();  
  var temp ='';
         temp += '<div class="grid-tile">';
         temp += '<a class="overlay" href="/portfolio/${portfolio?.id}">';
         temp += '<span class="title">${portfolio?.title}</span>';
         temp += '<span>by ${portfolio?.ownerName}</span><div class="category">Project log</div>';

         temp += '<img src="${portfolio?.coverImage()}" width="100%" /><hr/><p>${portfolio?.title}</p>';


        $(".add-more").click(function () {
          for (var i = 0; i < 10; ++i) {
                 console.log(temp);
                $(temp).appendTo('.freewall');
              }

        });
</g:javascript>

HTML

<div id="freewall" class="grd freewall">
                %{-- <div class="grid-sizer"></div> --}%
                <g:each in="${list}" var="portfolio" max="10">

                    <div class="grid-tile">
                        <a class="overlay" href="/portfolio/${portfolio.id}">

                            <span class="title">${portfolio.title}</span>
                            <span>by ${portfolio.ownerName}</span>
                            <div class="category">Test</div>

                        </a>
                        <img src="${portfolio?.coverImage()}" width="100%" />
                                                    <hr/>
                                                    <p>${portfolio.title}</p>
                    </div>
                </g:each>

                </div>


    </div>
<div class="push"></div>
</div>
  <div class="add-more">

    <h2>See more</h2>

</div>

我在动态grails模板中尝试freewall。静态工作得很好但不是grails :( 的更新

管理让它使用字符串，但$ {portfolio？.coverImage（）}似乎没有附加到img标签.. :(

帮助表示赞赏

Answer 1

这个想法是你没有在好的地方进行迭代。您可以使用隐藏元素在html中通过g:each进行迭代，然后调整JS代码，或者在JS中进行迭代更清晰的解决方案将是第一个，即调整您的JS代码来处理您在HTML中显示时编写的10个模板

JS CODE

$(".add-more").click(function () {      
  //iterate over the templates
  $("#templates > div.grid-tile").each(function(){             
         console.log(this);
        $(this).appendTo('.freewall');
      });

});

HTML CODE

        <div id⁼"templates" style="display:none">
           <g:each in="${list}" var="portfolio" max="10">

                <div class="grid-tile">
                    <a class="overlay" href="/portfolio/${portfolio.id}">

                        <span class="title">${portfolio.title}</span>
                        <span>by ${portfolio.ownerName}</span>
                        <div class="category">Test</div>

                    </a>
                    <img src="${portfolio?.coverImage()}" width="100%" />
                                                <hr/>
                                                <p>${portfolio.title}</p>
                </div>
            </g:each>
       </div>

第二种解决方案不太干净

 //creates an array to store items
 var coverImages = array();
  <g:each in="${list}" var="portfolio" max="10" status="idx">
     //here, you write to the JS output N variables named temp_0, temp_1, etc
     var temp_${idx} ='';
     temp_${idx} += '<div class="grid-tile">';
     temp_${idx} += '<a class="overlay" href="/portfolio/${portfolio?.id}">';
     temp_${idx} += '<span class="title">${portfolio?.title}</span>';
     temp_${idx} += '<span>by ${portfolio?.ownerName}</span><div class="category">Project log</div>';

     temp_${idx} += '<img src="${portfolio?.coverImage()}" width="100%" /><hr/><p>${portfolio?.title}</p>';
     //don't forget to add the temp_$idx var to the array
     coverImages.push(temp_${idx})
  </g:each>

    $(".add-more").click(function () {
      //iterate over the array
      for (var i in coverImages) {
             var temp = coverImages[i]
             console.log(temps);
            $(temp).appendTo('.freewall');
          }

    });

问题是所产生的JS代码会很混乱。因为你会有类似的东西：

var temp_0 ='';
     temp_0 += '<div class="grid-tile">';
     temp_0 += '<a class="overlay" href="/portfolio/${portfolio?.id}">';
     temp_0 += '<span class="title">${portfolio?.title}</span>';
     temp_0 += '<span>by ${portfolio?.ownerName}</span><div class="category">Project log</div>';

     temp_0 += '<img src="${portfolio?.coverImage()}" width="100%" /><hr/><p>${portfolio?.title}</p>';
     coverImages.push(temp_0)
 var temp_1 ='';
     temp_1 += '<div class="grid-tile">';
     temp_1 += '<a class="overlay" href="/portfolio/${portfolio?.id}">';
     temp_1 += '<span class="title">${portfolio?.title}</span>';
     temp_1 += '<span>by ${portfolio?.ownerName}</span><div class="category">Project log</div>';

     temp_1 += '<img src="${portfolio?.coverImage()}" width="100%" /><hr/><p>${portfolio?.title}</p>';
     coverImages.push(temp_1)

10次......（我想你必须在每次迭代下插入\n，我还没检查过）

此处显示的代码尚未经过测试....根据您的需求进行调整

Grails继续给出空指针异常

1 个答案: