敲除可拖动可排序映射克隆更改

Question

我正在尝试使用带有映射插件的 knockout-sortable 将产品列表拖到另一个列表。

这里有一个非常 stripped-back fiddle 来展示我的意思。

我想要 'cart' 中的产品参考，而不是克隆 'shelf' 中的产品。

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

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

我已经创建了一个 'clone' 函数，但是因为我所有的数据都被映射了，所以它没有使用构造函数，例如：

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 键。我已经在 fiddle 中注释掉了代码。 console.log 拖动后没有被调用，所以函数甚至没有被调用。

我还在 Google 论坛上查看了 knockout-sortable 并找到了 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 类似于 return new Product(mappingData.data);

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

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

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

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

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

敲除可拖动可排序映射克隆更改

knockout draggable sortable mapping clone alteration

javascript

knockout-mapping-plugin

knockout.js

knockout-sortable