<commit_before>{% load knockout %}

<!DOCTYPE html>
<html lang="en">
<head>
    <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js'></script>
</head>
<body>

<h1>Django</h1>
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        {% for person in persons %}
        <tr>
            <td>{{ person.id }}</td>
            <td>{{ person.first_name }}</td>
            <td>{{ person.last_name }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
<h1>Knockout</h1>
<div id="personviewmodel">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Remove</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: persons">
            <tr>
                <td><input data-bind="value: id" /></td>
                <td><input data-bind='value: first_name, valueUpdate: "afterkeydown"' /></td>
                <td><input data-bind="value: last_name" /></td>
                <td><input data-bind="value: first_name" /></td>
                <td><input data-bind="value: last_name" /></td>
                <td><button data-bind='click: $root.removePerson'>Remove a Person</button></td>
            </tr>
        </tbody>
    </table>
    Count: <span data-bind='text: persons().length'></span>
    <button data-bind='click: addPerson'>Add a Person</button>
    <button data-bind='click: sortPersonsAsc'>Sort Asc</button>
    <button data-bind='click: sortPersonsDesc'>Sort Desc</button>
</div>
<script>
    {{ persons|knockout }}
</script>

</body>
</html><commit_msg>use debug knockout, add pre-rendered lib<commit_after>{% load knockout %}

<!DOCTYPE html>
<html lang="en">
<head>
    <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js'></script>
    <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/knockout-pre-rendered/0.5.0/knockout-pre-rendered.min.js'></script>
</head>
<body>

<h1>Django</h1>

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        {% for person in persons %}
        <tr>
            <td>{{ person.id }}</td>
            <td>{{ person.first_name }}</td>
            <td>{{ person.last_name }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<h1>Knockout</h1>

<h2>Regular</h2>
<div id="personviewmodel">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Remove</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: persons">
            <tr>
                <td><input data-bind="value: id" /></td>
                <td><input data-bind='value: first_name, valueUpdate: "afterkeydown"' /></td>
                <td><input data-bind="value: last_name" /></td>
                <td><input data-bind="value: first_name" /></td>
                <td><input data-bind="value: last_name" /></td>
                <td><button data-bind='click: $root.removePerson'>Remove a Person</button></td>
            </tr>
        </tbody>
    </table>
    Count: <span data-bind='text: persons().length'></span>
    <button data-bind='click: addPerson'>Add a Person</button>
    <button data-bind='click: sortPersonsAsc'>Sort Asc</button>
    <button data-bind='click: sortPersonsDesc'>Sort Desc</button>
</div>

<h2>Pre-rendered</h2>
<div id="prerendered">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Remove</th>
            </tr>
        </thead>
        <tbody data-bind="foreachInit: { data: persons, createElement: createPerson }">
            <tr data-template>
                <td><input data-bind="value: id"></td>
                <td><input data-bind="value: first_name"></td>
                <td><input data-bind="value: last_name"></td>
                <td><button data-bind='click: $root.removePerson'>Remove a Person</button></td>
            </tr>
            {% for person in persons %}
            <tr data-init>
                <td><input data-bind="init, value: id" value="{{ person.id }}"></td>
                <td><input data-bind="init, value: first_name" value="{{ person.first_name }}"></td>
                <td><input data-bind="init, value: last_name" value="{{ person.last_name }}"></td>
                <td><button data-bind='click: $root.removePerson'>Remove a Person</button></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    Count: <span data-bind='text: persons().length'></span>
    <button data-bind='click: addPerson'>Add a Person</button>
    <button data-bind='click: sortPersonsAsc'>Sort Asc</button>
    <button data-bind='click: sortPersonsDesc'>Sort Desc</button>
</div>

<script>
    {{ persons|knockout }} {# personviewmodel #}
    {{ persons|knockout_bindings:"prerendered,ignore_data"}}
</script>

</body>
</html>
{'fraction_non_alphanumeric': 0.18753488372093025, 'fraction_numerical': 0.0039069767441860465, 'mean_word_length': 1.9473684210526316, 'pattern_counts': {'":': 0, '<': 241, '<?xml version=': 0, '>': 241, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '966503', 'n_tokens_mistral': 1833, 'n_tokens_neox': 1715, 'n_words': 337}