how to make durandal (breeze) wait? using promise

Question

hello all (it's a long post, sorry for that)

i have 3 drop-down list that should populate dynamically based on each other.

Continent - Country - Leagues (soccer)

I'm using Hot Towel (Durandal + knockout + Breeze)

using the course that john papa provided i was able to fill two of them with no problem. preloaded continent and country and it's working like a charm, but third one not.

I'm using breeze for fetching data, the data is retrieved, it's not about data, after some SSO (Searching StackOverflow), i tough the problem is "promise" i need to return promise, so durandal can understand it should wait. added the change but still not working.

all examples which i found are working in "activate" function (returning promise in activate function) but i should return promise in observable.subscribe.

(and all of you who are delivering these great products, please provide more samples with better title, description for common scenarios for newbies like me. Thank You ALLLL)

i don't know whats I'm doing wrong. any suggestion?

view:

<section title="Soccer Result">

    <select data-bind="options: continents, optionsText: 'name', value: selectedContinent, optionsCaption: 'Please Select a Continent'"></select>
    <select data-bind="options: countries, optionsText: 'Title', value: selectedCountry"></select>
    <select data-bind="options: leagues, optionsText: 'Title', value: selectedLeague"></select>


    <ul id="popularLeagues" data-bind="foreach: popularLeagues">
        <li class="popularLeagueLI">
            <a>
                <span data-bind="text: Title"></span>
            </a>
        </li>
    </ul>

view js code (just important parts)

function GetLeagueResultByCountryCode(countryCode) {

            if (leagueResult()) {
                datacontext.getLeagueResultPartials(leagueResult, countryCode, true);
            }
            logger.log("GetLeagueResultByCountryCode successd");
        }

        var activate = function () {

            selectedCountry.subscribe(function () {
                if (selectedCountry()) {
                    {
                        if (!selectedCountry() || !selectedCountry().Code == undefined)
                            return;

                        //leagues.push( { ID: 340, Title: 'for test' });

                        return datacontext.getLeaguesByCountryCode(leagues, selectedCountry().Code(), true)

                    }
                }
            });

            countriesAll(datacontext.lookups.countries);
            boot();
        };

this line is responsible to return result and drop-down should get filled base on it's result

return datacontext.getLeaguesByCountryCode(leagues, selectedCountry().Code(), true)

datacontext

    var getLeaguesByCountryCode = function (leagues, countryCode, forceRemote) {

        var promiseTest = Q.all([
            getLeaguesByCountryCode2(leagues, countryCode, forceRemote)
        ])

        return promiseTest.then(succeeded);

        function succeeded() {

            var x = 'y';
        }
    }
    var getLeaguesByCountryCode2 = function (leagues, countryCode, forceRemote) {

        return EntityQuery.from('LeagueByCountryCode')
            .withParameters({ countryCode: getKoValue(countryCode) })
            .select('ID,Title')
            .using(manager).
            execute().
            then(querySucceeded)
            .fail(queryFailed);


        function querySucceeded(data) {
            var list = partialMapper.mapDtosToEntities(
                manager, data.results, 'League', 'ID');

            //list = data.results;

            if (leagues) {
                leagues(list);
            }
            logger.log('Retrieved [Leagues] from remote data source ' + getKoValue(countryCode),
                data, true);
        }

    };

at first try, i was just calling getLeaguesByCountryCode2 but after searching getLeaguesByCountryCode with Q.all and other stuff has been added.

You problem is that your returning the promise the subscribe function, not to the activate function. Also, setting up the subscription inside the activate function will cause multiple subscriptions to get setup if the view is activated multiple times (this is likely). You should separate them. — Kyeotic
thanx. that was my problem, i just moved the code into viewAtteched and everything's worked, i wish i was able to mark your answer as "Answer". you are great. — Amirreza

Kyeotic Kyeotic · Accepted Answer · 2013-05-23T21:15:27

You problem is that your returning the promise the subscribe function, not to the activate function. Also, setting up the subscription inside the activate function will cause multiple subscriptions to get setup if the view is activated multiple times (this is likely). You should separate them.

how to make durandal (breeze) wait? using promise

1 Answers