javascript - 在 jQuery 中用户交互后逐个迭代 Python 提供的数组？

Question

(请耐心等待，我会尽我所能解释这一点。如果需要，请要求澄清。)

我正在尝试创建一个“热门或不热门”类型的排名器。我有一组通过 Django ValuesQuerySet 提供给我的对象，并通过 itertools.combinations() 运行以创建配对。每个配对都作为字典的元组输出，如下所示:

({'id': 55, 'name': u'Person 1'}, {'id': 63, 'name': u'Person 2'}),
({'id': 55, 'name': u'Person 1'}, {'id': 10, 'name': u'Person 3'}),
({'id': 55, 'name': u'Person 1'}, {'id': 90, 'name': u'Person 4'}),
({'id': 63, 'name': u'Person 2'}, {'id': 10, 'name': u'Person 3'}),
... and so on ...

当然，我将在模板中使用呈现这些字典的值。

为此建议的 UI 将显示每个人的照片并等待用户点击。单击后，它将加载下一个配对，直到所有配对都用完。我的 JavaScript-fu 一点也不好，所以我的问题是:

1. 向 jQuery 提供要遍历的字典元组列表的理想方法是什么？ JSON？嵌套数组？用 Django 做些什么？

2. 如何在用户响应后逐个遍历此数组(而不是仅仅执行 jQuery.each() 并显示所有内容——此外为“获胜”的人提供保存分数的机会，以便在配对用尽后汇总。)？

(对于其中一个或两个问题的帮助将不胜感激!)

Answer 1

关于#1

毫无疑问，将此数据从 django View 获取到模板中的 javascript 的最佳方法是在列表(元组、字典)中使用 json.dumps()。结果将是一个字符串，您可以将其直接传递给模板。在模板代码中，您将获取该值并将其分配给一个变量:

<script type="text/javascript">
// use the 'safe' filter to prevent autoescaping/encoding of potential html entities.
var people = {{ the_json_string|safe }}; // don't forget the semicolon, that would be rude.
// from here, you'll be able to access your data in a natural fashion
console.log(people[0][1].id); // 63
console.log(people[0][1].name); // Person 2

</script>

json 模块包含在 2.6 及更高版本的 python stdlib 中。如果您运行的是早期版本，我相信 django 会捆绑 simplejson(一种兼容的替代方案)。不要引用我的话，因为我的系统上没有安装最近的 django，但我相信导入路径是 from django.utils import simplejson，也许现在仍然是。

关于#2

为了演示这是如何工作的，在此做出一些假设。考虑以下 html 片段(在您的模板中)。

<div id="hot-or-not">
    <div class="person">
        <span class="name"></span>
        <button>Hot</button>
    </div>
    <div class="person">
        <span class="name"></span>
        <button>Hot</button>
    </div>
</div>

我们可以使用这个标记，并在处理人对列表时重复使用它。需要设置一些东西来完成 UI:

• 设置事件监听器以插入交互。
• 向标记添加数据。
• 从用户的回复中收集统计数据。

这是我对这可能如何运作的看法。

<script type="text/javascript">
var people = {{ the_json_string|safe }};

function feed_data(){
    if(people.length>0){
        var peeps = people.shift(); // returns the next row off the top of the array
        var divs = $('.people', '#hot-or-not').get(); // returns an array of matching elements
        $.each(peeps, function(i,v){
            $(divs[i]).find('span.name').text(v.name); // set the text for the span
            $(divs[i]).find('button').data('person_id', v.id); // stash the id in the button's "data"
        });
        return true;
    } else {
        return false;
    }
}

// initial data fed in
feed_data();

var scores = {}; // we'll keep a map of id => score as we progress.

$('.person>button', '#hot-or-not').on('click', function(){ // note that $(el).on() was introduced recently (1.7.x ?)

    var person_id = $(this).data('person_id'); // we will stash the id in the button when we add our person info to the markup

    if (person_id in scores){
        scores[person_id]++;  // increment this person's score.
    } else {
        scores[person_id] = 1; // this person hasn't been scored yet, so start a new counter.
    }

    var result = feed_data(); // feed in the next set of data (advance to the next pair).
    if(result == false){ // we ran out of people to feed
        // Tally scores here and do whatever you need to do to end the game!
        // There are many ways you could go about searching the object for the highest score...
    }
});

</script>