javascript - knockout 可拖动可排序映射克隆更改

Question

我正在尝试使用 Knockout-sortable 和映射插件，将产品列表拖动到另一个列表。

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

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

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

环顾四周，我发现 Ryan Niemeyer 对 similar problem 提出了一个非常诱人的解决方案。几年前，但是 fiddle 抛出了 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 键。我已经在 fiddle 中注释掉了这方面的代码。拖动后不会调用console.log，因此该函数甚至不会被调用。

我还在 Google 论坛上查找了可 knockout 排序，并发现 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作为不可观察的返回，这应该没问题，除非您需要对该值的变化使用react。

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

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

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

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