Question

我正在用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只会在更改时更新，即插入或删除新对象，如果更新了其中的项目，则不会更新。我是否必须为每个对象创建一个observable，然后将其推入数组中，或者是我的“showPosition”方法中的一种简单方法，我可以轻松地遍历数组并更新每个“poximity”字段？

我希望所有这一切都有意义吗？

注意：showPosition（）方法没有考虑到敲除绑定。我的同事正计划使用JavaScript查找表中的每一个并手动更新它。

Answer 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观察属性的更改。

ObservableArray中的Knockout更新变量

1 个答案: