Knockout update variable in ObservableArray

Question

I'm writing a mobile application in HTML5, JavaScript and CSS and converting it into an app using PhoneGap. I have a list of locations, some other data and the distance the user is from each of those locations. I have a knockout observableArray that is being populated with json information that has the following format.

[{
   "Id":1,
   "Name":"Field 1",
   "Available":12,
   "InUse":5
}]

I'm, then finding the users current location using the GeoLocation and determining how far from each of the locations he or she is. I'm using this code monitor the users position.

navigator.geolocation.watchPosition(showPosition, showError, options)

. As they walks closer to one of the fields I want to be able to display the distance they are from each field as it changes. My HTML is simple and looks like this:

<table style="width: 95%; padding: 2px; margin-left: 2px;">
            <thead>
                <tr style="text-align: left">
                    <th>Field</th>
                    <th>Available</th>
                    <th>In Use</th>
                    <th>Distance</th>
                </tr>
            </thead>

            <tbody data-bind="foreach: myArray" >
                <tr>
                    <td><span data-bind="text: Field"></span></td>
                    <td><span data-bind="text: Available"></span></td>
                    <td><span data-bind="text: InUse"></span></td>
                    <td><span data-bind="text: Proximity"> </span> </td>
                </tr>
            </tbody>
    </table>

Everything is working fine and "showPosition" is being call when I move about but I don't know how to update the proximity field in the observableArray as it changes.

My showPosition method (written by a colleague) looks like this.

function showPosition(position) {
        for (i = 0; i < config.geoLocs.length; i++) {
            var distance =
                calculateDistance(position.coords.latitude,
                                  position.coords.longitude,
                                  config.geoLocs[i].Lat,
                                  config.geoLocs[i].Lng)

            config.geoLocs[i].Proximity = (distance * 1000).toFixed(0) + " m";

        }

    }

I know that my observableArray will only be updated if it changes i.e. a new object is inserted or deleted and won't be updated if an item in it is updated. Do I have to create an observable for each object and then push that into the array or is a simple way in my "showPosition" method that I can easily iterate through the array and update each "poximity" field?

I hope all of this makes sense?

Note: The showPosition() method was not written with knockout bindings in mind. My colleague was planning on using JavaScript to find each in the table and manually update it.

I think I've got it working. All I did is in the showPosition() method clear the observableArray and then readd it. e.g. myArray(""); myArray(config.geoLocs); — Bruce
– Bruce, Commented Aug 22, 2013 at 8:23

Jeroen · Accepted Answer · 2013-08-22 08:44:30Z

1

I know that my observableArray will only be updated if it changes i.e. a new object is inserted or deleted and won't be updated if an item in it is updated

That is true... to some extent. However, if you've mapped your JSON correctly then the items in the array will also be observables. If that's not the case you should try to change that, because the following solution is probably better than the one you posted in a comment (clearing the myArray and re-adding all items).

Here's what the updated showPosition could look like:

// Assuming your view model is available like this in scope:
var viewModel = however_it_was_constructed;

function showPosition(position) {
    var items = viewModel.myArray();

    for (i = 0; i < items.length; i++) {
        var distance =
            calculateDistance(position.coords.latitude,
                              position.coords.longitude,
                              items[i].Lat,
                              items[i].Lng)

        var newProximity = (distance * 1000).toFixed(0) + " m";

        // Update the observable, so the view gets updated automatically
        items[i].Proximity(newProximity);
    }
}

Again, this only works if the properties in the myArray are observable. However, from your question I feel they should be, because you want the View to observe changes to the properties.

answered Aug 22, 2013 at 8:44

Jeroen

64.4k47 gold badges231 silver badges372 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bruce Over a year ago

Thanks Jeroen for your time. What you're saying makes sense. ATM the items in the array are not observable so this is not working. In due course I'll modify the code so that they are and then try your approach which should work.

Collectives™ on Stack Overflow

Knockout update variable in ObservableArray

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related