将新元素添加到可观察的可剔除数组中-最佳做法? [英] Adding new elements to a knockout observable array - best practices?

问题描述

说您有一个车辆"列表-您有一个这些ko.observable()的observableArray.

Say you have a list of "vehicles" - you have an observableArray of these ko.observable()s.

您可以让用户使用以下内容添加新的载具:

You let your user add a new vehicle with the following:

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

如果他们保存了车辆，则可以从数据服务中获得一辆真正的车辆，然后将其替换为空白:

If they save the vehicle, you get a real vehicle from your dataservice, and then replace the blank one with this:

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

我知道我在这里遗漏了一些代码，但这更多是实践/方法问题，而不是代码问题.这是将新项目添加到列表的可接受方法吗?新建一个临时模板，如果用户保存，则将其替换为实际项目?

I know I'm leaving some code out here, but this is more of a practices/approach question than a code question. Is this an acceptable approach to adding new items to a list? New up a temporary template, and throw it away in place of an actual item if the user saves?

推荐答案

这将取决于您要如何处理UI的中间状态.浏览器等待服务器结果时的状态.通常，您可以将解决此问题的方法归纳为三个思想流派.

This will depend on how you want to handle the intermediate state of your UI; the state when the browser is waiting for a result from the server. You can generally group approaches to this into three schools of thought.

一种方法是阻止用户进行更多输入，显示一些等待指示符(飞轮)，然后致电服务器.当服务器返回您的数据时，您可以将其添加到阵列/UI并删除等待指示符.这种方法可确保您的用户在服务器关闭时不会排队操作，因为他们在等待服务器时无法执行操作.

One approach is to stop the user from making any more entries, display some wait indicator (spinning wheel), and call the server. When the server returns your data you then add it to the array/UI and remove the wait indicator. This approach ensures that your user is never queuing up actions while your server is down, since they can't perform actions while waiting for the server.

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

In this case, you wouldn't add the temporary data at all.

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

This approach only blocks the item in question, putting an uneditable item into your UI and letting it become editable only after the server responds. In the meanwhile, the user can continue to perform actions. This approach is pretty friendly to the user, but can be tough to implement depending on how much editing is possible.

这与您现在实现的最相似.添加一个临时实体，并在拥有服务器数据时将其替换.

This is most similar to what you have implemented now. Add a temporary entity and replace it when you have the server data.

使用这种方法，您只需输入希望从服务器返回的数据，然后让用户继续前进即可.服务器返回时，您只需更新丢失的数据即可，例如Tomas Kirda在其答案中显示的那样.这种方法对用户非常友好，但是在处理服务器错误时需要格外小心.

With this approach, you just put in the data you expect to come back from the server and let the user continue on their way. When the server returns, you just update the missing data as Tomas Kirda shows in his answer. This approach is very friendly to the user but requires more care in dealing with server errors.

总的来说，我喜欢Tomas的回答，但是您询问了最佳做法，所以我想为您提供更广阔的前景.

Overall, I like Tomas' answer, but you asked about best practices so I wanted to give you a broader picture.

这篇关于将新元素添加到可观察的可剔除数组中-最佳做法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！