敲除绑定未更新

我正在玩弄一个应用程序，该应用程序从youtube API获取playlistItem数据，并使用knockout.js在页面上列出播放列表中的所有标题。我可以让列表加载得很好，但我在尝试向应用程序添加一些额外功能时遇到了一些问题。敲除绑定未更新

我试图添加的东西是播放列表中的标题总数以及允许用户加载另一个播放列表的输入字段的计数。我目前可以不工作。这里的app.js文件：

// 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

这里的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>

来源

2016-12-27 ChielWintermans

也请分享，如果有任何出现在控制台中遇到的问题或错误。 – Teyam

model.clipCound是可观察的对象，你要设置的值的方式不正确。

model.clipCount=data.pageInfo.totalResults;

您需要更改这个

model.clipCount(data.pageInfo.totalResults);

来源

2016-12-27 15:35:31

这解决了它，谢谢。其他问题与此相关或类似的错误。 – ChielWintermans

敲除绑定未更新

回答

相关问题