javascript - 通过 Javascript 定位 Django 模型中的动态内容

Question

我正在尝试制作个人博客模板，但我被困在显示所有帖子预览的页面上。在此页面中，有两列，#content-column-left 和 #content-column-right，预览应基于以下条件放置在其中一列上:列的高度(较短的列接收下一个帖子预览)。我一直在尝试通过 JavaScript 来完成此操作，并使用包含“虚拟”数据的数组:

function processPosts() {
    var cleft = document.getElementById('content-column-left');
    var cright = document.getElementById('content-column-right');

    for (var i = 0; i < testeVector.length; i++) {
        var preview = document.createElement('div');
        preview.className = 'post-preview';
        var conteudo = postsVector[i];
        var aux = document.createElement('h1');
        aux.appendChild(document.createTextNode(content.title))
        preview.appendChild(aux);
        preview.appendChild(document.createTextNode(content.content));

        if(cleft.clientHeight > cright.clientHeight) {
            cright.appendChild(preview);
        } else {
            cleft.appendChild(preview);
        }
    };
}

上面的代码按预期工作。问题是，帖子保存在博客的数据库中，我不知道如何从数据库中检索它们，以便我可以在 Javascript 上使用帖子的数据。一直在寻找一种方法(没有结果)在 View 代码上创建要显示的帖子列表，并在 JavaScript 上使用此类列表。顺便说一句，我正在使用 Django。

Answer 1

在服务器端，我会将所有帖子按顺序排列，而不尝试将它们分成两列。然后在客户端，您可以让 JavaScript 处理将帖子分成两列。

例如，您的 Django 模板输出如下所示:

<div id="posts">
    <div class="post">...</div>
    <div class="post">...</div>
    <div class="post">...</div>
    <div class="post">...</div>
</div>

在 JavaScript 中，在页面加载时，您可以从 #posts 中取出所有帖子并创建列，然后根据需要将帖子排列到列中:

// First, retrieve our element containing all the posts:
var posts = document.getElementById('posts');

// Then, create the columns we want to put the posts into:
var leftColumn = document.createElement('div');
var rightColumn = document.createElement('div');
// You'll probably want to give them IDs or classes so you can style them.

// Next, we'll replace the #posts div with the two columns:
posts.parentNode.insertBefore(leftColumn, posts);
posts.parentNode.insertBefore(rightColumn, posts);
posts.parentNode.removeChild(posts);

// Now we have two empty columns on the page and the original #posts div stored
// within the posts variable.  We can now take elements out of the #posts div and
// place them into the columns.

while(posts.hasChildNodes()) {
    // Fetch the next element from the #posts div and remove it.
    var post = posts.firstChild;
    posts.removeChild(post);
    // We might catch some whitespace here; if so, discard it and move on.
    if(post.nodeType === Node.ELEMENT_NODE) {
        continue;
    }
    // Put the post in one of the columns, based on your logic.
    // (I think you can figure this out, based on the code in your question.)
}