CODEWITHSUNDEEP
javascriptbackbone.js
Dylan James Budolfson
Dylan James Budolfson

Reputation: 3

how to create and modify multiple dynamic textareas in backbone.js

I am creating a backbone.js app with consecutive text areas for individual instructions to be entered consecutively. At the end of each instruction, a button is pushed that spawns the next textarea. I am wondering if there is a way to add dynamic text to the beginning of each text box such as step 1, step 2, .... dynamically so that I can add drag and drop later so that steps are listed consecutively.

thanks

<script type="text/template" id="direction-control-template">

    <table class="tblDirections">
        <tr>
            <td class="Directionlabel">Step : </td>
            <td class="Direction"><textarea rows="5" cols="70">Step # :</textarea><br></td>
            <td>
                    <button type="button" id="btnAddDirection" class="btn btn-success btn-xs addIngredient">+</button>
            </td>
        </tr>
    </table>
    <hr />
</script>

Upvotes: 0

Views: 114

Answers (1)

Kyle Needham
Kyle Needham

Reputation: 3389

You could add property to your view that increments each time you click the add button.

Backbone.View.extend({
    directionCount: 0,

    events: {
        'click #btnAddDirection': 'addDirection'
    },

    addDirection: function()
    {
        // Each time the #btnAddDirection is clicked the views directionCount
        // property is incremented, you can then pass this value to your
        // textarea template to display the count.
        this.directionCount++;
    }
});

Check out this live example.

Upvotes: 1

Related Questions