淘汰赛可拖动可排序映射克隆更改

Question

我正在尝试使用带有映射插件的可淘汰排序将产品列表拖动到另一个列表。

这是一个非常 stripped-back fiddle 来尝试展示我的意思。

我想要的是让“购物车”中的产品引用而不是克隆“货架”上的产品。

我已经设法通过引用货架上的商品来计算购物车中商品的名称，但我无法让购物车中的产品仅包含进行此引用所需的数据，而没有其他杂物。

环顾四周，我发现 Ryan Niemeyer 几年前对 similar problem 提出的这个非常诱人的解决方案，但是提琴手抛出了 404 错误！

我创建了一个“克隆”函数，但是因为我的所有数据都已映射，所以它没有使用构造函数，例如：

var product = function(ID, name, other){
    this.productID = ko.observable(ID);
    //etc.
};

这意味着我不能做我想做的事，也就是：

product.prototype.clone = function(){
    var x = ko.mapping.toJS(this);
    delete x.productName; 
    delete x.someOtherData;
    ko.mapping.fromJS(x);
};        

我希望将一个新对象放入购物车，只需引用原始 productID 键。我已经在小提琴中注释掉了这个代码。 console.log 拖拽后没有被调用，所以函数也没有被调用。

我还在 Google 论坛上查看了可淘汰排序，并找到了 this thread，这是我从中获得克隆位的地方 - 但我无法使其适合我的用例！

成功回答此问题的结果将是，当购物车中只有一辆自行车时，将productArray 保持原样并将listArray 设置为[{'productID':1}]。

这是我第一次在 SO 上发布问题，所以如果我没有说清楚，请放轻松！我已经感谢社区，因为多年来它在解决我的问题方面非常有帮助:)

Answer 1

您希望您的映射选项看起来像：

var options = {
    productArray: {
        create: function(mappingData) {
            var result = ko.mapping.fromJS(mappingData.data);

            result.clone = function() {
                return { productID: result.productID() };
            };

            return result;
        }
    }
};

或者，您可以为您的产品创建一个带有克隆函数的构造函数，然后像return new Product(mappingData.data);一样返回它

我有上面的克隆只是将 productID 作为不可观察返回，这应该没问题，除非您需要对该值的变化做出反应。

calculatedName 函数的第一行需要类似于：

var x = ko.unwrap(arg.productID);

这将检索值是否可观察，因此该函数可以针对 productArray 或 listArray 工作。

http://jsfiddle.net/rniemeyer/hLqctg4L/