views:

52

answers:

3

Hi, all.

I'm writing a twitter-like note-taking web app.

In a page the latest 20 notes of the user will be listed, and when the user scroll to the bottom of the browser window more items will be loaded and rendered.

The initial 20 notes are part of the generated html of my django template, but the other dynamically loaded items are in json format.

I want to know how do I do the tag-and-username converting consistently.

Thanks in advance.

A: 

I'm not sure exactly what you're asking, but what's wrong with something like {{ user.get_absolute_url }}? For the tag detail URLs, it really depends on what you're looking for, but you would have to construct the url and view for that yourself.

Casey Stark
+2  A: 

There's a couple of pieces to consider here. On the server side, you have to be able to maintain what "chunk" of the notes list the user is on. The easiest way to do this is probably the Django paginator. It works basically by taking a QuerySet, setting a count for the number of items, then giving it the "page" number (or "chunk" number) and it returns those items.

You could do it with JSON, but it would be just as easy to do it with HTML as well. When we look at the client side part of this you'll see why.

So we can have a view "api" to handle a note "chunk" (note all my code samples here are abbreviated just for demonstration. You'd want to have error handling and all that)...

def get_notes_chunk(request, *args, **kwargs):
    # Get our notes, however...
    all_notes = Notes.objects.all()

    # Paginate them based on the page we're on...
    chunk_number = request.GET.get('c')    
    paginator = Paginator(all_notes, 20)  # (show 20 at a time)
    current_chunk = paginator.page(chunk_number)

    # Render to template all that jazz
    render_to_template( ... , { 'paginator':paginator, 'current_chunk':current_chunk }, ...)

Our template renders <li> tags which we'll stick into a <ul> on the client...

{% for note in current_chunk.object_list %}
    <li>{{ note }}</li>
{% endfor %}

Now on the client, we need to write some javascript to handle this. It's up to you to determine on what event to fire the update, but as for how, we can use a little jQuery to handle this...

<script type="text/javascript">    
    var chunk_count = 1;
    var notes_list_id = 'notes-list'

    function load_next_chunk() {
        chunk_count += 1;
        $.get('{% url get_notes_chunk %}?c=' + chunk_count, function(html) {
            $('#'+notes_list_id).append(html);
        });        
    }
</script>

<body>

    ...

    <ul id="notes-list">
        <!-- Render chunk #1 here -->
    </ul>

    ...

</body>

Some things that would probably make sense...

  • Refactor the rendering of the notes list into a template tag so that you can re-use it for your API and the main rendering of your page
  • Refactor the querying/paginating of the Notes (or whatever) model so that you can re-use it in both views
  • Figure out on what event the next chunk will be loaded and implement that.
T. Stone
+1  A: 

The question isn't that clear... but for generating the HTML out of a Tweet take a look at twp(based on the official twitter-text-java lib):
http://github.com/BonsaiDen/twp

Ivo Wetzel