Durandal/热毛巾 SPA、Bing 地图和淘汰赛自定义绑定答案

【问题标题】：Durandal/Hot Towel SPA, Bing Maps and knockout custom bindingsDurandal/热毛巾 SPA、Bing 地图和淘汰赛自定义绑定
【发布时间】：2013-04-15 07:34:53
【问题描述】：

我正在使用带有 Bing 地图库的 Durandal/Hot Towel SPA http://soulsolutions.com.au/Blog/tabid/73/EntryId/818/Knockout-JS-and-Bing-Maps.aspx。该库创建自定义 ko 绑定以访问地图控件。

对于 durandal，此绑定仅以一种方式起作用。更改后可以从地图控件中获取值（例如缩放级别），但是当我想在单击后设置缩放级别时，它不起作用。

当我在一个简单的 html 页面上对其进行测试时，在 Durandal 之外一切正常。

知道有什么问题吗？任何帮助将不胜感激。

我的视图模型：

    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);
    };
};

查看：

<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">

【问题讨论】：

我怀疑您在 testZoom 函数中的“this”值不是您认为它所引用的值。在您的 mapVM 中创建一个名为 self 的变量，并将其指向这个 var self = this;在 this.testZoom 中，引用 self.map.mapview.zoom(5)。告诉我这是否有效
你能看看你的console.log，看看有没有报错。

标签： knockout.js bing-maps durandal custom-binding hottowel

【解决方案1】：

我认为您的 testZoom 运行良好。但是函数内部对this的引用没有map属性：

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);
    };
};

【讨论】：

【解决方案2】：

@Damian，我正在尝试破解路由器的路由信息以支持嵌套菜单并携带对象，但不确定安全性。你可以看看here

【讨论】：