敲除可拖动可分类映射克隆改变. [英] knockout draggable sortable mapping clone alteration

问题描述

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

I am trying to use knockout-sortable, with the mapping plugin, to drag a list of products to another list.

这里有一个非常拨弄小提琴来尝试证明我的意思.到达.

Here is a very stripped-back fiddle to try and show what I'm getting at.

我想要的是供购物车"中的产品引用而不是克隆货架"中的产品.

What I want is for the products in the 'cart' to reference, not clone, the products on the 'shelf'.

我已经设法通过参考货架上的商品来计算购物车中商品的名称，但是我很难使购物车中的商品仅具有他们需要的数据才能进行参考，而没有所有其他杂物.

I have managed to calculate the name of the items in the cart by referencing those on the shelf, but I am having trouble in getting the products in the cart to only have the data they need to make this reference, without all the other cruft.

环顾四周，我发现Ryan Niemeyer将此诱人的解决方案应用于

Having looked around, I found this very tantalising solution by Ryan Niemeyer to a similar problem a couple of years ago, but the fiddles throw a 404 error!

我创建了一个'clone'函数，但是由于我的所有数据都已映射，因此它没有使用以下构造函数:

I have created a 'clone' function, but because all my data is mapped it has not used a constructor such as:

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

这意味着我无法做我想做的事情，即:

Which means that I cannot do what I want to do, which is:

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

我希望将一个仅引用原始productID键的新对象放到购物车中.我已经在小提琴中为此注释掉了代码.拖动后不会调用console.log，因此甚至不会调用该函数.

Which I would hope would drop a new object into the cart with just a reference to the original productID key. I have commented out the code for this in the fiddle. The console.log does not get called after dragging, so the function is not even getting called.

我还在Google论坛上查看了可剔除的排序，并发现了此主题，这是我从那里获得克隆的地方-但我无法使其适合我的用例！

I also looked on the Google forum for knockout-sortable and found this thread, which is where I got the clone bit from - but I can't make it fit my use case!

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

The result of a successful answer to this question will, when there is just a bike in the cart, leave productArray as it is and have listArray set to [{'productID':1}].

这是我第一次发布关于SO的问题，因此，如果我不清楚自己的意思，请放轻松！我已经对社区感激不尽，因为多年来对解决我的问题都非常有帮助:)

This is the first time that I've posted a question on SO, so please go easy on me if I have not made myself clear! I am already indebted to the community, as it has been so helpful in solving my problems for years and years :)

推荐答案

您希望映射选项看起来像这样:

You would want your mapping options to look something like:

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

Alternatively, you could create a constructor for your product with a clone function on it and just return that like return new Product(mappingData.data);

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

I had the clone above just return the productID as a non-observable, which should be fine unless you need to react to that value changing.

calculatedName函数的第一行将需要像这样:

The first line of your calculatedName function would then need to be something like:

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

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

这将检索该值是否可见，以便该函数可以对productArray或listArray使用.

This will retrieve the value whether it is observable or not, so the function can work against the productArray or the listArray.

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

这篇关于敲除可拖动可分类映射克隆改变.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！