Масонство бесконечной прокрутки (путем добавления частичного)? [Rails]

Question

Итак, я пытаюсь реализовать бесконечную прокрутку в масонство, добавив частичное частичное, в отличие от добавления div. Добавление div - именно так работает Infinite Scroll jQuery plugin Paul Irish. Я использовал его, но теперь это бесполезно для меня, поскольку я хочу вместо этого добавлять частичные. Вы, вероятно, путают, но я буду стараться, чтобы очистить путаницы с кодами:

masonry.js

var $container = $('.postindex'); 

    $container.imagesLoaded(function(){ 

    $container.masonry({ 
     itemSelector: '.posts-wrapper', 
     isFitWidth: true, 
     percentPosition: true 
    }); 
    }); 

pagination.js

$(document).ready(function() { 

    if ($('#infinite-scrolling').size() > 0) { 

    $(window).on('scroll', function() { 
     var more_posts_url; 
     more_posts_url = $('.pagination a.next_page').attr('href'); 
     if (more_posts_url && $(window).scrollTop() > $(document).height() - $(window).height() - 60) { 
     $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..."/>'); 
     $.getScript(more_posts_url); 
     } 
    }); 
    } 

}); 

index.html .haml

.postindex.transitions-enabled.infinite-scroll.page 
    .postin 
    -@posts.each do |post| 
     = render 'posts/post', post: post 
#infinite-scrolling 
    = will_paginate @posts 

_post.html.haml (экстракт)

.posts-wrapper 
    .post 
    .image.center-block 
     %a{id: "imageurl_#{post.id}", href: "/", "data-gallery": ""} 
     = cl_image_tag(post.image.full_public_id, quality:"auto", fetch_format:"auto", width:640, crop: "scale", class: "img-responsive") 

Таким образом, в этом случае, вместо добавления posts-wrapper DIV, я хочу, чтобы добавить весь post частично. Это именно то, как бесконечный код свитка был написано до того, как реализована Кладка:

index.js.erb

$('.postin').append('<%= j render @posts %>'); 
<% if @posts.next_page %> 
    $('.pagination').replaceWith('<%= j will_paginate @posts %>'); 
<% else %> 
    $(window).off('scroll'); 
    $('.pagination').remove(); 
<% end %> 

Это, конечно, не работает с масонством (прилагаемые элементы перекрывают существующие). Теперь, как я могу заставить это работать?

---

В случае, если вам интересно, почему мне нужно добавить частичное вместо DIV, у меня есть кусок сценария в конце _post.html.haml, что мне нужно, чтобы убедиться, что выполняется каждый раз пост будет загружен. Вот полный файл:

_post.html.haml (полное)

.posts-wrapper 
    .post 
    .image.center-block 
     %a{id: "imageurl_#{post.id}", href: "/", "data-gallery": ""} 
     = cl_image_tag(post.image.full_public_id, quality:"auto", fetch_format:"auto", width:640, crop: "scale", class: "img-responsive") 


:javascript 
    if ($(window).width() <= 800){ 
    $("#imageurl_#{post.id}").attr("href", '#{escape_javascript(render :partial => 'posts/imageurl800', :locals => {:post => post })}'); 
    } 
    else if ($(window).width() <= 1200) { 
    $("#imageurl_#{post.id}").attr("href", '#{escape_javascript(render :partial => 'posts/imageurl1200', :locals => {:post => post })}'); 
    } 
    else if ($(window).width() <= 1600) { 
    $("#imageurl_#{post.id}").attr("href", '#{escape_javascript(render :partial => 'posts/imageurl1600', :locals => {:post => post })}'); 
    } 
    else { 
    $("#imageurl_#{post.id}").attr("href", '#{escape_javascript(render :partial => 'posts/imageurl1920', :locals => {:post => post })}'); 
    } 

где _imageurl800.html.haml является:

= cl_image_path(post.image.full_public_id, width:800, crop:"scale", class:"img-responsive") 

и _imageurl1200.html.haml является:

= cl_image_path(post.image.full_public_id, width:1200, crop:"scale", class:"img-responsive") 

и так на.

В основном, что он делает, каждый раз, когда сообщение загружается, он проверяет ширину браузера и в зависимости от того, что он загружает изображение в галерее ("data-gallery": "") в определенном размере при нажатии. Надеюсь, я поняла. Если есть лучший способ справиться со всем, то, пожалуйста, предложите так. Благодаря!

Answer 1

Ok, несколько часов спустя ...

var $postbox = $('<%= j render @posts %>'); 
var $container = $('.postindex'); 

$postbox.imagesLoaded(function(){ 
$container.append.($postbox).masonry('appended', $postbox);  
}); 

<% if @posts.next_page %> 
    $('.pagination').replaceWith('<%= j will_paginate @posts %>'); 
<% else %> 
    $(window).off('scroll'); 
    $('.pagination').remove(); 
<% end %> 

Это должно работать для вас.

Answer 2

Пробовал подход DRY-er, и он решил мою проблему. Я удалил скрипт из частичного и вместо этого выполнил функцию js для поиска и замены текста в URL-адресе. Так, например:

_post.html.Haml

%a{class: "post_url", href: "#{cl_image_path(post.image.full_public_id, width:640, crop:"scale", class:"img-responsive")}", "data-gallery": ""} 

masonry.js

function urlhelper() { 
    $("a.post_url").each(function(){ 
    var str = $(this).attr('href') 
    if ($(window).width() <= 800) { 
     var txt = str.replace("w_640","w_800"); 
    } else if ($(window).width() <= 1200) { 
     var txt = str.replace("w_640","w_1200"); 
    } else if ($(window).width() <= 1600) { 
     var txt = str.replace("w_640","w_1600"); 
    } else { 
     var txt = str.replace("w_640","w_1920"); 
    } 
    $(this).attr('href', txt); 
    }); 
} 

$(document).ready(function() { 
    urlhelper(); 
}); 

$(document).ajaxComplete(function() { 
    urlhelper(); 
}); 

Это решает мою проблему, но я все еще хотел бы знать, если это возможно, чтобы добавить бесконечную прокрутку к кирпичной кладке путем оказания партиалы. Поэтому, если вы знаете ответ на этот вопрос, не стесняйтесь, дайте мне знать!

Answer 3

Это может помочь:

http://masonry.desandro.com/methods.html#appended

В то время как JQuery можно добавить строку HTML с .append(), масонство-х прилагается не может. При добавлении контента с помощью jQuery ajax-методов, таких как $ .get() или $ .ajax(), оберните строку содержимого HTML в объект jQuery, чтобы использовать ее с добавлением.

// does not work 
$.get('page2', function(content) { 
    // HTML string added, but items not added to Masonry 
    $grid.append(content).masonry('appended', content); 
}); 

// does work 
$.get('page2', function(content) { 
    // wrap content in jQuery object 
    var $content = $(content); 
    // add jQuery object 
    $grid.append($content).masonry('appended', $content); 
});