使用databind-foreach的Durandal observablearray绑定问题

Question

我刚开始学习Durandal并遇到了与observablearray绑定问题的问题。

我可以确认数组中有数据，因为我可以手动弹出数据渲染它。但是，当我尝试使用foreach数据绑定列出数据时，数据未呈现。

有人可以帮忙吗？我不确定为什么通过数据绑定-foreach渲染失败....提前谢谢你。

以下是视图的代码：

<section class="view">
<header>
    <button class="btn btn-info btn-force-refresh pull-right" 
        data-bind="click: refresh"><i class="icon-refresh"></i> Refresh</button>
    <h3 class="page-title" data-bind="text: title"></h3>
    <div class="article-counter">
        <address data-bind="text: speakers().length"></address>
        <address>found</address>            
    </div>


</header>
<!--Manual Pop to confirm we have data!-->
<section>
    <article class="article-container-full-width">
        <div>
            <img data-bind="attr: { src: speakers().pop().imageName() }" class="img-polaroid"/>
            <address data-bind="text: speakers().pop().firstName()"></address>
            <address data-bind="text: speakers().pop().lastName()"></address>
        </div>    
    </article>
</section>
<!--data bind for each, this is not working!-->
<section data-bind="foreach: speakers" class="view-list">
    <article class="article-container-full-width">
        <div>
            <img data-bind="attr: {src: imageName}" class="img-polaroid"/>
            <address data-bind="text: firstName"></address>
            <address data-bind="text: lastName"></address>
        </div>    
    </article>
</section>

以下是viewmodel的代码：

define(['dataservice'], function (dataservice) {

var speakers = ko.observableArray();
var initialized = false;

var vm = {
    activate: activate,
    speakers: speakers,
    title: 'Speakers',
    refresh: refresh,
};

return vm;

function activate() {
    if(initialized) {return;}
    initialized = true;

    return refresh();
}

function refresh() {

    return dataservice.getSpeakersPartials(speakers);
}

}）;

数据服务代码：

define(['logger', 'durandal/system', 'model'],
function (logger, system, model) {

var getSpeakersPartials = function(speakersObservable) {
    // reset the observable
    speakersObservable([]);

    // set ajax call
    var options = {
        url: '/api/speakers',
        type: 'GET',
        dataType: 'json'
    };

    // make call
    return $.ajax(options)
        .then(querySucceeded)
        .fail(queryFailed);

    // handle the ajax callback
    function querySucceeded(data) {
        var speakers = [];
        data.sort(sortSpeakers);
        for (i = 0; i < 6; i++) {
            var item = data[i];
            var speaker = new model.SpeakerPartial(item);
            speakers.push(speaker);
        }
        speakersObservable(speakers);
        log('Retrieved speaker partials from remote data source',
            speakers,
            true);
    }

};

var dataservice = {
    getSpeakersPartials: getSpeakersPartials
};
return dataservice;

//#region Internal methods
function sortSpeakers(s1, s2) {
    return(s1.firstName + s1.lastName > s2.firstName + s2.lastName)
        ? 1 : -1;
}


function queryFailed(jqXHR, textStatus) {
    var msg = 'Error getting data. ' + textStatus;
    logger.log(msg,
        jqXHR,
        system.getModuleId(dataservice),
        true);
}

function log(msg, data, showToast) {
    logger.log(msg,
        data,
        system.getModuleId(dataservice),
        showToast);
}
//#endregion

}）;