Question

假设你有一个“车辆”列表 - 你有一个observableArray这些ko.observable（）s。

您可以让您的用户使用以下内容添加新车辆：

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

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

Answer 1

这取决于您希望如何处理UI的中间状态;浏览器等待服务器的结果时的状态。你通常可以将这种方法归为三种思想流派。

UI阻止

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

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

队列

此方法仅阻止有问题的项目，将不可编辑的项目放入UI并让它在服务器响应后才可编辑。同时，用户可以继续执行动作。这种方法对用户来说非常友好，但根据可能的编辑量而难以实现。

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

最终一致性

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

总的来说，我喜欢托马斯的回答，但你问过最佳做法，所以我想给你一个更广阔的图景。

Answer 2

我不会更换车辆，只是：

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

将新元素添加到knockout可观察数组 - 最佳实践？

2 个答案:

UI阻止

队列

最终一致性