Knockout Bindings werden nicht aktualisiert

Ich spiele mit einer App, die PlaylistItem-Daten von der Youtube API abruft und alle Titel in der Playlist auf einer Seite mit knockout.js auflistet. Ich kann die Liste ganz einfach laden, aber ich stoße auf einige Probleme, während ich versuche, der App einige zusätzliche Funktionen hinzuzufügen.Knockout Bindings werden nicht aktualisiert

Die Dinge, die ich hinzufügen möchte, sind die Gesamtzahl der Titel in der Wiedergabeliste und ein Eingabefeld, in dem der Benutzer eine andere Wiedergabeliste laden kann. Ich kann derzeit weder zur Arbeit noch zur Arbeit kommen. Hier ist die app.js Datei:

// global variables 
var ytResults=[]; 
var pageToken; 
//var clipCount=ko.observable(''); 
var clipsDone=0; 
var ytPlaylistID='PLpmQJ2D10iJx_GEYNZwAON38cluj0dNj4'; 

// function to create clip objects 
var clip=function(data){ 
    this.clipTitle=ko.observable(data.title); 
}; 

function Model(){ 
var self=this; 
//Create an observable array to store a list of clip objects 
self.clipList=ko.observableArray([]); 
self.clipCount=ko.observable(''); 
} 
var model =new Model(); 

function ViewModel(){ 
var self = this; 
self.errorMessage=ko.observable(''); 
self.loadPlaylist=ko.observable(''); 
errorHandling=function(){ 
    self.errorMessage("Can't load the list and app"); 
}; 

fillList=function(){ 
    for(i=0;i<ytResults.length;i++){ 
     var clipData={ 
      title: ytResults[i] 
     }; 
     model.clipList.push(new clip(clipData)); 
    }; 
}; 

var ytConnector=(function(){ 
    var searchYtRequest=function(requestPayload, callback){ 
     $.ajax({ 
      url: requestPayload.url, 
      type: requestPayload.method, 
     }).done(function(data){ 
      //console.log(data); 
      model.clipCount=data.pageInfo.totalResults; 
      ytResults.length=0; 
      for(i=0;i<data.items.length;i++){ 
       ytResults=ytResults.concat(data.items[i].snippet.title); 
      }; 
      fillList(); 
      pageToken=data.nextPageToken; 
      clipsDone=clipsDone+50; 
      if(clipsDone<model.clipCount){ 
       ytConnector.fetchDataFromYt(); 
      }; 
     }).fail(function(jqxhr, textStatus, error) { 
      // Let empty results set indicate problem with load. 
      // If there is no callback - there are no UI dependencies 
      self.errorMessage("Failed to load: " + textStatus + ", " + error); 
     }).always(function() { 
      typeof callback === 'function' && callback(ytResults); 
     }); 
    }; 
    // get playlist data from youtube 
    function fetchDataFromYt(){ 
     if(pageToken!=null){ 
      thisUrl='https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId='+ytPlaylistID+'&key=AIzaSyBFrCeUpPitoT6eOk_mq6Uza6etWtAH0oQ&pageToken='+pageToken; 
     }else{ 
      thisUrl='https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId='+ytPlaylistID+'&key=AIzaSyBFrCeUpPitoT6eOk_mq6Uza6etWtAH0oQ'; 
     }; 
     var requestData = { 
      url: thisUrl, 
      method: 'GET', 
     }; 
     searchYtRequest(requestData); 
    }return{ 
     fetchDataFromYt: fetchDataFromYt, 
    }; 
})(); 
ytConnector.fetchDataFromYt(); 

thisPlaylist=function(){ 
    ytPlaylistID=self.loadPlaylist(); 
    console.log('playlist ID: '+ytPlaylistID); 
}; 
} 
ko.applyBindings(new ViewModel()); 

// PLpmQJ2D10iJzd1SPy7FlaaBFt07fhLSL3

Hier ist der html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="https://fonts.googleapis.com/css?family=Telex|Aldrich" rel="stylesheet"> 
<link href="css/style.css" rel="stylesheet"> 
<title>Youtube playlist</title> 
</head> 
<body> 
<div class="container"> 
    <div class="errorMsg" data-bind="text: errorMessage, visible: errorMessage"> 
    </div> 
    <div class="form-holder"> 
     <form data-bind="submit: thisPlaylist"> 
       playlist ID: <input type="text" size="50" data-bind="value: loadPlaylist, valueUpdate: 'afterkeydown'"> 
      <button type="submit" data-bind="enable: loadPlaylist().length>0">submit</button> 
     </form> 
    </div> 
    <div class="info-holder"> 
     clips in playlist:<span data-bind="text: model.clipCount"></span> 
    </div> 
    <ul class="listDiv" data-bind="foreach: model.clipList"> 
     <li data-bind="text: clipTitle"> 
    </ul> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="js/lib/knockout-3.2.0.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/hmac-sha1.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/enc-base64-min.js"></script> 
<script src="js/oauth-1.0a.js"></script> 
<script src="js/app.js"></script> 
</body>

Quelle

2016-12-27 ChielWintermans

ändern Bitte begegnet Probleme oder Fehler teilen, die in der Konsole angezeigt, wenn es irgendwelche gibt. – Teyam

model.clipCound ein beobachtbares Objekt ist, so, wie Sie den Wert setzen falsch ist.

model.clipCount=data.pageInfo.totalResults;

Sie müssen auch auf diese

model.clipCount(data.pageInfo.totalResults);

Quelle

2016-12-27 15:35:31

Das hat es behoben, danke. Andere Probleme waren mit diesem oder ähnlichen Fehlern verbunden. – ChielWintermans

Knockout Bindings werden nicht aktualisiert

Antwort

Verwandte Themen