Timber

Question

更新 3 请看下面的答案！如果需要，可以根据要求提供进一步的解释

更新 2

js

 $archiveLayout.on('click',loadMoreButtonID,function(){


        let pageCount = $(this).attr('data-page'),
            nextPage  = parseInt( $(this).attr('data-page') ) + 1;



    let getParams;

    _.each($loadMoreButton, function(item) {
        let thisData = window.$(item).data()
        getParams = thisData;
    });

        console.log(getParams);

    $.post(ajaxurl, getParams,function(response){
            // var json_obj = JSON.parse(res);  
            console.log(response);
            console.log(response.data);


        }).done(function(){

            $('#load-more').attr('data-page', nextPage);
        });

});

php 函数

add_action('wp_ajax_more_all_posts', __NAMESPACE__ . '\ajax_more_all_posts');
add_action('wp_ajax_nopriv_more_all_posts', __NAMESPACE__ . '\ajax_more_all_posts');
function ajax_more_all_posts()
{ 

    $response = array(
       'data' => Timber::compile(array('templates/blocks/content.twig'), $context)
    );
    wp_send_json($response);


}

HTML 已返回，但只有 1 post 并且数据未填充 twig 标记。

老****

所以在我的博客页面上，我想加载更多 posts，我想知道是否可以将响应数据附加到 posts 数组已经在页面上了。或者，如果需要以某种方式构建它以允许这样做。

任何 tips/help 等将不胜感激。

下面的代码示例

我在我的树枝文件中设置了以下内容：

{% for post in posts %}
            {% set postCount = loop.index %}    


            {% set postImage = TimberImage(post.get_field('preview_image_post'))|resize('medium_large') %}

            {% include "blocks/content.twig" with {post: post}  %}  

        {% endfor %}

将 post 输出到页面上就好了。

然后我发出 ajax 请求，执行以下操作：

window.axios.get(fancySquaresRestUrl + 'wp/v2/posts', {
            params: getParams
        })
        .then(function (response) {




          // append the entire repsonese? wasn't working, could be doing it wrong

            _.each( response.data, function( post, index ) {

                  //append each object on its own maybe???
            });




        })
        .catch(function (error) {
            console.log(error);
        });

Answer 1

我已经做了一些接近的事情。我的解决方案是在 ajax 处渲染并发送 html.

所以我的 Ajax 调用 php 并且在 php 我这样做：

对于此示例，我的 ajax 调用了 get_php_logic 操作。在 php 动作中，我按照我的逻辑渲染树枝，在最后 return 作为 Json 响应。

$response = array(
   'data' => Timber::compile(array('template.twig'), $context)
);
wp_send_json($response);

这样我的 response.data 就可以 html 准备添加或替换了。

Answer 2

完整答案如下：（这不是向 Timber/Post 对象附加任何内容，而是从传递给 twig 文件的数据中附加 HTML）

如果您对以下代码有任何问题或意见，请随时提出。

使用的js：

$archiveLayout.on('click',loadMoreButtonID,function(){


    var $this = $(this);

    var pageCount = $(this).attr('data-pageCount');
    var nextPage = parseInt($(this).attr('data-page')) + 1;

    var getParams = void 0;

    _.each($loadMoreButton, function (item) {
        var thisData = window.$(item).data();
        getParams = thisData;
    });
    getParams.pagecount = pageCount;
    // console.log(getParams);

    $loader.fadeIn();
    $loadMoreButton.fadeOut();
    $.post(ajaxurl, getParams, function (response) {
        // var json_obj = JSON.parse(res);  
        // console.log(response);
        //console.log(response.data);


        if(response === 'nomore'){
            $loadMoreButton.fadeOut();
        } else {
            for(var hp = 0; hp < response.length; hp++){
                $('[data-js="append-content"]').append(response[hp].data);
                $this.attr('data-pageCount', Number(pageCount)+1);
            }

            $loadMoreButton.fadeIn();
        }


    }).done(function () {
        $loader.fadeOut();
        // $('#load-more').attr('data-page', nextPage);
    });

});

正在调用的函数：

add_action('wp_ajax_more_all_posts', __NAMESPACE__ . '\ajax_more_all_posts');
add_action('wp_ajax_nopriv_more_all_posts', __NAMESPACE__ . '\ajax_more_all_posts');
function ajax_more_all_posts()
{ 

$cat_id = $_REQUEST[ 'cat' ] or $_GET[ 'cat' ];
$paged = $_REQUEST['pagecount'];
$cat = $_REQUEST['dataCat'];



$args = [
    'cat' => $cat_id,
    'posts_per_page' => 9,
    'post_status' => 'publish'
];

if($paged != ""){
    $args['paged'] = $paged; 
}

$posts = Timber::get_posts($args);
$message = [];
if($posts){
    foreach($posts as $post){
        $response = array(
            'data' => Timber::compile('templates/blocks/content.twig', ['post' => $post])
        );
        $message[] = $response;
    }
} else {
    $message = "nomore";
}
wp_reset_query();
wp_reset_postdata();

wp_send_json($message);
die();
}

Timber - WordPress，在 ajax 调用后将数据 (json) 附加到 Timber\Post 对象

Timber - WordPress, Append data (json) to Timber\Post Object after ajax call

ajax

wordpress

twig