Breeze.js query not updating knockout view at all

Question

I'm new to Breeze and struggling with having the results of a breeze query linked to a knockout observable array and then the array not updating the view when populated. I found this questoin, which is a similar problem, but mine won't bind even the first time around. I did try some of the things suggested in that thread, though, with no luck.

I've been working off of the Breeze.js ToDo demo (here). Using console.log, my data is coming from my query looking the same as the data from the demo code. The query is pulling a list of breweries from a table that I'm just trying, for now, to bind to a list (eventually a drop-down). Is there just some tiny thing I'm missing here? Thanks, in advance, for any help!

View Model Code:

viewModel = (function () {
    var self = this;

    self.breweries = ko.observableArray();

   function getBreweries() {
        dataService().getBreweries().then(querySucceeded).fail(queryFailed);

        function querySucceeded(data) {
            self.breweries(data.results);
        }
        function queryFailed(error) {
           alert(error);
        }
    }

   getBreweries();

});

ko.applyBindings(viewModel);

dataService Code (in a separate file, but data's coming out of it just fine):

dataService = (function () {

    var serviceName = '/breeze/BeerMatch/'; //route to Breeze Web API Controller
    var manager = new breeze.EntityManager(serviceName);

    return {
        getBreweries: getBreweries
    };

    function getBreweries() {
        var query = breeze.EntityQuery.from("Breweries");

        return manager.executeQuery(query);
    }


});

and, finally, front-end code to try and bind this list:

<script src="~/Scripts/jquery-2.1.3.js" type="text/javascript"></script>
<script src="~/Scripts/q.js" type="text/javascript"></script>
<script src="~/Scripts/knockout-3.3.0.js" type="text/javascript"></script>
<script src="~/Scripts/breeze.min.js" type="text/javascript" ></script>
<script src="~/Scripts/app/dataservice.js" type="text/javascript"></script>
<script src="~/Scripts/app/viewModel.js" type="text/javascript"></script>

<div>
    <div class="row" id="Home">
        <ul id="Breweries" data-bind="foreach: breweries">
            <li>
                <span data-bind="text: BreweryName"></span>
            </li>
        </ul>
    </div>
</div>

have you tried changing the closing of the view model to "})();" instead of "});" ? — Tony
I just tried it and it did not help. Thank you for the response — Ian L
data is what's returned from the query executed in the dataService. This is what it looks like straight from dataService: [Brewery__Breeze_BeerMatch_Models, Brewery__Breeze_BeerMatch_Models, Brewery__Breeze_BeerMatch_Models]0: Brewery__Breeze_BeerMatch_Models1: Brewery__Breeze_BeerMatch_Models2: Brewery__Breeze_BeerMatch_Modelslength: 3__proto__: Array[0] and this is what self.breweries looks like after it gets set: function d(){if(0<arguments.length)return d.Wa(c,arguments[0])&&(d.X(),c=arguments[0],d.W()),this;a.k.Ob(d);return c} — Ian L

Ian L Ian L · Accepted Answer · 2015-04-08T15:07:17

I'm not 100% sure why this worked, but I moved all of my script declarations to the bottom of my Index.cshtml file (they were previously declared at the top, but outside of the tag.

Putting them at the bottom, outside my main container s, in the the same order they were in in the original post fixed the problem and now everything is binding alright. Thanks, all!

Breeze.js query not updating knockout view at all

1 Answers