How to update variables on view change
<p>Hello I'm having problems updating a variable once it has been set and the value changes on the view. When I search for a video and click on it, it starts playing, but when I search for another video and click play nothing happens. I'm require to refresh the browser in order to search for another video.</p>

<p>This is my index.html</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html class="ui-mobile-rendering"&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"&gt;
    &lt;script src="js/lib/modernizr-2.8.3.min.js"&gt;&lt;/script&gt;



&lt;!-- The Templates --&gt;

&lt;!--start home --&gt;


&lt;div data-role="page" id="pageone" data-theme="b"&gt;



    &lt;div data-role="header"&gt;
    &lt;h1&gt;welcome&lt;/h1&gt;
    &lt;div data-role="navbar"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#" data-icon="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" data-icon="arrow-r"&gt;Page Two&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#myPopup" data-rel="popup" data-transition="slidedown" data-icon="search"&gt;Search&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;



   &lt;div data-role="popup" id="myPopup" class="ui-content"&gt;

  &lt;div data-role="main" class="ui-content"  &gt;
    &lt;h2&gt;Browse Channels&lt;/h2&gt;
    &lt;form class="ui-filterable" &gt;
      &lt;input id="myFilter" data-type="search"&gt;
    &lt;/form&gt;
    &lt;ul id = "users" style="overflow-y: scroll; height:200px;" data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true" &gt;

    &lt;/ul&gt;
&lt;/div&gt;
   &lt;/div&gt;



&lt;div style="text-align:center"&gt; 
&lt;br&gt;
  &lt;video controls  id="video1" width=420&gt;


  &lt;/video&gt;
&lt;/div&gt; 

&lt;script&gt; 
var myVideo = document.getElementById("video1"); 

function playPause() { 
    if (myVideo.paused) 
        myVideo.play(); 
    else 
        myVideo.pause(); 
} 

&lt;/script&gt; 


 &lt;div data-role="footer"&gt;
    &lt;h1&gt;Page Footer&lt;/h1&gt;


  &lt;/div&gt; 


&lt;/div&gt;






&lt;!--end home --&gt;



    &lt;!-- The Scripts --&gt;

&lt;script src="js/lib/jquery-1.12.3.min.js"&gt;&lt;/script&gt;
&lt;script src="js/lib/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/lib/underscore-min.js"&gt;&lt;/script&gt;
        &lt;script src="js/lib/backbone-min.js"&gt;&lt;/script&gt;


&lt;script src="js/main.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;



&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>This is my main.js</p>

<pre><code>(function() {
/* model */
var m3u8model = Backbone.Model.extend({
    defaults: function(){
        return {
            channel: "",
            url: ""
        }
    }

    });
/* Collection */

var m3u8collection = Backbone.Collection.extend({
    model: m3u8model, /* binding the model to the collection */
    url: "m3u8.json", /* path to Json File */
    parse: function(response){
    return response.channels;
    }

    });

var UsersView = Backbone.View.extend({
  el: "#users",

    collection: new m3u8collection(), /* bind Collection into the view*/

/* Benging fetching collection uppon the view initiation */

    initialize: function(){


    var self = this;
   this.collection.fetch({ /*underscore fetch method, to fetch the json objects from the collection*/

      success: function() { /* if fetch success continue */
        self.render();
      }
    });        
    },


  /* Events */

    events:{
        "click": "onClick"

    },

    onClick: function(e) {
        var link = ($(e.target).attr('href'));
        e.preventDefault();

        this.$el.append(myVideo.play());
         e.preventDefault();

        var vid = new VideoView({pos: link, el: "#video1"});
        vid.render();
    },


/* End of Events */





   /* End View initiation, and fetch pass the values to the render method. */


     render: function() {
    var scope = this;
    this.collection.forEach(function(model) {
      scope.output(model);
    });
    return this;
  },

  output: function(model) {
    var row = document.createElement("li");
    row.innerHTML = 
        " &lt;a href="+ model.get("url")+"&gt;"+ model.get("channel")+"&lt;/a&gt;";    
    this.el.appendChild(row);

  }
});


var VideoView = Backbone.View.extend({

    initialize: function (attrs) {


    this.options = attrs;
},



    render: function(){

            var row = document.createElement("li");
    row.innerHTML = 
        this.$el.append(" &lt;source src="+this.options.pos+"&gt;"+"type="+"application/x-mpegURL autoplay");    
    this.el.appendChild(row);


       return this;


      /*
             this.$el.append("&lt;source src="+this.options.pos+ "type="+'application/x-mpegURL');

      this.$el.append("hello"+this.options.pos); */
       return this;

    }

    });


var app = new UsersView();



})();
</code></pre>