0

假设你有一个“车辆”列表——你有一个由这些 ko.observable() 组成的 observableArray。

您让您的用户添加具有以下内容的新车辆：

var emptyVehicle = {
    "make": "chevrolet",
    "model": "corvette"
};
app.on('CLICKED_ADD_VEHICLE', function () {
            var vehicle = new vehicleViewModel(emptyVehicle);
            vehicle.hasWheels(true);
            innerModel.sets.push(set);
        });

如果他们保存车辆，您会从您的数据服务中获得一辆真正的车辆，然后将空白车辆替换为：

app.on('CLICKED_SAVE', function (oldVehicle) {
            var newVehicle = new vehicleViewModel(dataservice.createVehicle(oldVehicle));
                    innerModel.vehicles.remove(oldVehicle);
                    innerModel.vehicles.push(newVehicle);
        });

我知道我在这里留下了一些代码，但这更像是一个实践/方法问题，而不是一个代码问题。这是将新项目添加到列表的可接受方法吗？新建一个临时模板，并在用户保存时将其丢弃以代替实际项目？

4

2 回答 2

3

这将取决于您希望如何处理 UI 的中间状态；浏览器等待来自服务器的结果时的状态。您通常可以将解决此问题的方法分为三种思想流派。

用户界面阻塞

一种方法是阻止用户进行更多输入，显示一些等待指示器（旋转轮），然后调用服务器。当服务器返回您的数据时，您将其添加到数组/UI 并删除等待指示器。这种方法可确保您的用户在服务器关闭时永远不会排队执行操作，因为他们在等待服务器时无法执行操作。

在这种情况下，您根本不会添加临时数据。

排队

这种方法只会阻止有问题的项目，将不可编辑的项目放入您的 UI 并使其仅在服务器响应后才可编辑。同时，用户可以继续执行动作。这种方法对用户非常友好，但可能很难实施，具体取决于可能的编辑量。

这与您现在实施的最相似。添加一个临时实体并在您拥有服务器数据时替换它。

最终一致性

使用这种方法，您只需输入您希望从服务器返回的数据，并让用户继续他们的方式。当服务器返回时，您只需按照 Tomas Kirda 在他的回答中显示的那样更新丢失的数据。这种方法对用户非常友好，但在处理服务器错误时需要更加小心。

总的来说，我喜欢 Tomas 的回答，但您询问了最佳实践，所以我想为您提供更广泛的了解。

于 2013-06-04T01:05:14.773 回答
1

我不会更换车辆，只是：

app.on('CLICKED_ADD_VEHICLE', function () {
        var vehicle = new vehicleViewModel(emptyVehicle);
        vehicle.hasWheels(true);
        vehicle.isNew(true);
        innerModel.sets.push(set);
    });

然后保存时：

app.on('CLICKED_SAVE', function (vehicle) {
        // Go to the server and save
        // Update this vehicle:
        vehicle.id(vehicleId);
        vehicle.isNew(false);
    });
于 2013-06-01T02:33:58.483 回答