0
こんにちは私は変数が設定され、ビューの値が変更されると変数の更新に問題があります。動画を検索してクリックすると再生が始まりますが、別の動画を検索して再生をクリックすると何も起こりません。私は別のビデオを検索するためにブラウザを更新する必要があります。ビューの変更で変数を更新する方法
これは私のindex.html
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css">
<script src="js/lib/modernizr-2.8.3.min.js"></script>
<!-- The Templates -->
<!--start home -->
<div data-role="page" id="pageone" data-theme="b">
<div data-role="header">
<h1>welcome</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">Home</a></li>
<li><a href="#" data-icon="arrow-r">Page Two</a></li>
<li><a href="#myPopup" data-rel="popup" data-transition="slidedown" data-icon="search">Search</a></li>
</ul>
</div>
<div data-role="popup" id="myPopup" class="ui-content">
<div data-role="main" class="ui-content" >
<h2>Browse Channels</h2>
<form class="ui-filterable" >
<input id="myFilter" data-type="search">
</form>
<ul id = "users" style="overflow-y: scroll; height:200px;" data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true" >
</ul>
</div>
</div>
<div style="text-align:center">
<br>
<video controls id="video1" width=420>
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
<div data-role="footer">
<h1>Page Footer</h1>
</div>
</div>
<!--end home -->
<!-- The Scripts -->
<script src="js/lib/jquery-1.12.3.min.js"></script>
<script src="js/lib/jquery.mobile-1.4.5.min.js"></script>
<script src="js/lib/underscore-min.js"></script>
<script src="js/lib/backbone-min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
</body>
</html>
ですこれは、あなたのコード内で起こっていくつかの混乱のものがあります
(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 =
" <a href="+ model.get("url")+">"+ model.get("channel")+"</a>";
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(" <source src="+this.options.pos+">"+"type="+"application/x-mpegURL autoplay");
this.el.appendChild(row);
return this;
/*
this.$el.append("<source src="+this.options.pos+ "type="+'application/x-mpegURL');
this.$el.append("hello"+this.options.pos); */
return this;
}
});
var app = new UsersView();
})();