1

我正在用 HTML5、JavaScript 和 CSS 编写移动应用程序，并使用 PhoneGap 将其转换为应用程序。我有一个位置列表、一些其他数据以及用户与每个位置的距离。我有一个淘汰赛 observableArray 正在填充具有以下格式的 json 信息。

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

我是，然后使用 GeoLocation 查找用户的当前位置，并确定他或她与每个位置的距离。我正在使用此代码监视用户的位置。

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

. 当他们走近其中一个字段时，我希望能够显示他们与每个字段变化时的距离。我的 HTML 很简单，看起来像这样：

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

一切正常，当我四处走动时正在调用“showPosition”，但我不知道如何在 observableArray 中的邻近字段发生变化时对其进行更新。

我的 showPosition 方法（由同事编写）看起来像这样。

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

        }

    }

我知道我的 observableArray 只会在它发生变化时更新，即插入或删除一个新对象，如果其中的项目被更新，则不会更新。我是否必须为每个对象创建一个可观察对象，然后将其推送到数组中，或者是我的“showPosition”方法中的一种简单方法，我可以轻松地遍历数组并更新每个“poximity”字段？

我希望这一切都有意义？

注意： showPosition() 方法在编写时并未考虑淘汰绑定。我的同事计划使用 JavaScript 在表中查找每个并手动更新它。

4

1 回答 1

1

我知道我的 observableArray 只会在它发生变化时更新，即插入或删除一个新对象，如果其中的项目被更新，则不会更新

这是真的……在某种程度上。但是，如果您正确映射了 JSON，那么数组中的项目也将是可观察的。如果不是这种情况，您应该尝试更改它，因为以下解决方案可能比您在评论中发布的解决方案更好（清除myArray并重新添加所有项目）。

以下是更新后的showPosition样子：

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

同样，这仅在 中的属性myArray是可观察的时才有效。但是，从您的问题来看，我认为它们应该是，因为您希望 View 观察属性的变化。

于 2013-08-22T08:44:30.243 回答