Question

我正在玩一个从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>

Answer 1

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

model.clipCount=data.pageInfo.totalResults;

您需要更改为

model.clipCount(data.pageInfo.totalResults);

Knockout绑定不会更新

1 个答案: