Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone.js Binding events
    text
    copied!<p>I found lots of questions for the same issue [events not being bound in view] and I was able to understand my mistakes and corrected it. Although the following code is not working. Actually I'm not understanding the concept of views in backbone.js. How does view bind with collections?</p> <pre><code> $(function () { // Whole function executes after dom load var LeaveAMsg = Backbone.Model.extend({}); var MsgCollection = Backbone.Collection.extend({ model: LeaveAMsg }); var messages = new MsgCollection(); var AppView = Backbone.View.extend({ el: "body", events: {"click button#text-input" : "newMsg"} , newMsg: function() { alert('hai'); var inputField = $('input[name=newMessageString]'); messages.create({content: inputField.val()}); inputField.val(''); this.render(); } , render: function() { var content = this.model.get('content'); $('.test-div').html(_.template($('#item-template').html(), {content:this.model.content})); }, initialize: function () { } }); var appview = new AppView(); }); </code></pre> <p>This is my html</p> <pre><code>&lt;body&gt; &lt;div class='finaltry'&gt; &lt;input type='text' name='newMessageString' /&gt; &lt;input type='button' id='text-input' value='Clickme' /&gt; &lt;/div&gt; &lt;div class='test-div'&gt; &lt;/div&gt; &lt;script type="text/template" id="item-template"&gt; &lt;div&gt; &lt;font color='gray'&gt; &lt;%= content %&gt; &lt;/font&gt; &lt;/div&gt; &lt;/script&gt; &lt;/body&gt; </code></pre> <p>Expecting some good explanation on views</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload