Home/ Questions/Q 7899879
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T08:49:25+00:00

Before explaining the problem I am facing,this is the code I am using: <!DOCTYPE

  • 0

Before explaining the problem I am facing,this is the code I am using:

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
        <script type="text/template" id="view_template">
            <li>
            <label class="lbl" style="width:100px;display:inline-block;"><%= name %></label>
            <button class="btn">Click</button>
            </li>
        </script>
        <script type="text/javascript">
            AppModel = Backbone.Model.extend({
                defaults : {
                    m_name : "Default name"
                },
                modify : function(value) {
                    this.set({
                        m_name : value
                    });
                }
            });

            $(document).ready(function() {
                $("#add").click(function() {
                    var appModel = new AppModel();
                    appModel.modify($("#txt").val());
                    new CustomView({
                        model : appModel
                    });
                    $("#txt").val("");
                });
                CustomView = Backbone.View.extend({
                    el : $(".list"),
                    events : {
                        "click .btn" : "showAlert"
                    },
                    initialize : function() {
                        this.render();
                    },
                    render : function() {
                        var variables = {
                            name : this.model.get("m_name")
                        };
                        var t = _.template($("#view_template").html(), variables);
                        $(this.el).append(t);
                    },
                    showAlert : function() {
                        alert(this.model.get("m_name"));
                    }
                });
            });

        </script>
    </head>
    <body>
        <input type="text" id="txt"/>
        <button id="add">
            Add
        </button>
        <ul class="list" style="list-style: none"></ul>
    </body>
</html>

A demo is here – http://jsfiddle.net/jCekv/

You can type any value into textfield and click Add.The text will be added to a list which is a backbone view.You can keep on adding multiple values to the list.After adding some items,click on the Click button in any of the items in the list.I want to get the value in the model for that view.But because of the way I am adding Events,event handlers are getting executed multiple times.For eg:If i add 3 items and click on any of the buttons in the list 3 alerts will come-one corresponding to each of the items that is added.This is not the way I want.I want to have the event being triggered only for the Backbone View which has been clicked so that I get access to the model of the Backbone View I have clicked.

How I can achieve this functionality?.Please let me know if my question is not clear.Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is that all your CustomViews have their element set to $(".list"). Therefore, all delegate events are added to the same DOM element, the list, and not the individual list items.

    See a possible solution here: http://jsfiddle.net/mbuchetics/R8jPA/

    I changed the CustomView to use a tagName of li instead of setting the element. The template is not appended to the element but instead its content is set. This way, each CustomView represents one item of the list and the click event refers to exactly that item.
    I also removed the render call from initialize, instead the view is rendered when it is appended to the list (in the “add click” callback).
    Render() returns this and therefore you can use view.render().el to get the list item’s html.

    You could further improve your application to use collections and a separate view for the collection. The collection view could then handle events such as “add” on the collection and update itself (and the individual item views) accordingly.

    • 0