Durandal/Hot Towel SPA, Bing Maps and knockout custom bindings

Question

I'm using Durandal/Hot Towel SPA with Bing Maps library described here http://soulsolutions.com.au/Blog/tabid/73/EntryId/818/Knockout-JS-and-Bing-Maps.aspx. This library creates custom ko binding to access map control.

With durandal this binding works only in one way. It is possible to get value (for example zoom level) from map control after change but when I want to set zoom level after click it's not working.

Outside Durandal when I was testing it on a simple html page everything was ok.

Any idea what's wrong? Any help would be greatly appreciated.

My viewmodel:

    var mapVM = function () {
    this.map = {
        options: {
            credentials: "bing key",
            customizeOverlays: true,
            showScalebar: false,
            showMapTypeSelector: false,
            enableClickableLogo: false,
            enableSearchLogo: false,
        },
        mapview: {
            zoom: ko.observable(4).extend({ throttle: 1 }),
        },
    };

    this.testZoom = function () {
        this.map.mapview.zoom(5);
    };
};

view:

<input data-bind='value: map.mapview.zoom, valueUpdate: "afterkeydown"' />
<input type="button" data-bind="click: testZoom" value="test zoom" />
<div id="mapControl" data-bind="bingmaps: { map: map }" style="position: relative; width: auto; height: 400px">

I suspect that your "this" value inside testZoom function is not what you think it is referencing. create a variable inside your mapVM called self and point it to this var self = this; and inside this.testZoom, reference self.map.mapview.zoom(5). Tell me if that works — Sujesh Arukil, Apr 22 '13 at 19:55
can you look at your console.log and check if there are any errors being reported. — Evan Larsen, Apr 23 '13 at 17:20

score 0 · Answer 1 · answered Apr 23 '13 at 02:21

I think your testZoom is working fine. But the reference to this inside the function does not have the map property:

var mapVM = function () {
    var that = this;
    that.map = {
        options: {
            credentials: "bing key",
            customizeOverlays: true,
            showScalebar: false,
            showMapTypeSelector: false,
            enableClickableLogo: false,
            enableSearchLogo: false,
        },
        mapview: {
            zoom: ko.observable(4).extend({ throttle: 1 }),
        },
    };

    that.testZoom = function () {
        that.map.mapview.zoom(5);
    };
};

score 0 · Answer 2 · edited May 23 '17 at 12:25

0

@Damian, I'm trying to hack the router's routeinfo to supported nested menus and to carry objects but not sure about security. You can have a look at here

edited May 23 '17 at 12:25

Community

1
1

answered May 11 '13 at 17:27

M.Ouedraogo

195
1
6

Durandal/Hot Towel SPA, Bing Maps and knockout custom bindings

2 Answers2