Knockout.js 移动可排序表后，Fineuploader按钮丢失。如果行移动，则可排序表中缺少插件元素

我一直在使用knockout.js和knockout-sortable.js。以创建可排序表。 此表的其中一列应该上载图像，并且仍然能够对表进行排序。 上传工作正常，但是当我对表格进行排序时，精细上传器的按钮丢失了，所有属性都丢失了

小提琴：

复制步骤：

单击添加资产

再次单击添加资产

将第二个资源移动到第一个位置。 fineuploader按钮丢失

实际情况是，一旦完成排序，就会删除div内容

Js代码：

var CommunityAsset = function(value, description, name) {
        this.Value = value;  
        this.Description = ko.observable(description);
        this.Name = "fineUploader" + name;            
    }
    var viewOverview = function()
    {
        var self = this;

        self.communityAssets = ko.observableArray();

        self.clearAsset = function(data, event) {

               self.communityAssets.remove(data);   

        };

        self.Uploaders = {};
        self.addAsset = function() {
            var name = self.communityAssets().length;
            var asset = new CommunityAsset("http://placehold.it/240x160", "", name);                    
            self.communityAssets.push(asset);
            createFineUploader(name);
        };        
        self.addAssetWithParams = function(value, description, name) {            
            var asset = new CommunityAsset(value, description, name);        
            self.communityAssets.push(asset);
            createFineUploader(name);


        };        
    }
var vc = new viewOverview();
vc.addAssetWithParams("http://placehold.it/240x160", "Hola",0);

ko.applyBindings(vc, $("#communityOverview")[0]);    




 function createFineUploader(intIndex)
    {
        vc.Uploaders[intIndex] = new qq.FineUploader({
                            element: $('#fineUploader'+intIndex)[0],
                            request: {
                                endpoint: '/Communities/FileUpload'
                            },
                            autoUpload: true,
                            sizeLimit: 4000000, // max size
                            validation: {
                                allowedExtensions: ['jpeg', 'jpg', 'gif']
                            },                
                            text: {
                                uploadButton: '<i class="icon-upload icon-white"></i> Upload a file'
                            },
                            multiple: false,
                            template: '<div class="qq-uploader ">' +
                                    '<pre class="qq-upload-drop-area "><span>{dragZoneText}</span></pre>' +
                                    '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
                                    '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                                '</div>',
                            classes: {
                                success: 'alert alert-success',
                                fail: 'alert alert-error'
                            },
                            callbacks: {
                                onComplete: function(id, name, response) {      
                                    if (response.success) 
                                    {
                                        var asset = ko.utils.arrayFirst(vc.communityAssets(), function(currentAsset) {
                                            return currentAsset.Name == "fineUploader"+intIndex; // <-- is this the desired seat?
                                        });

                                        // asset found?
                                        if (asset) {
                                            asset.Value = response.path;                                            
                                        }                                     
                                    }
                                }
                            },
                            debug: true
                        });

    }

var CommunityAsset=函数（值、描述、名称）{
这个。值=值；
此描述=可观察（描述）；
this.Name=“fineUploader”+Name；
}
var viewOverview=函数（）
{
var self=这个；
self.communityAssets=ko.observearray（）；
self.clearAsset=功能（数据、事件）{
self.communityAssets.remove（数据）；
};
self.Uploaders={}；
self.addAsset=函数（）{
var name=self.communityAssets（）.length；
var资产=新社区资产（“http://placehold.it/240x160“，”，姓名）；
self.communityAssets.push（资产）；
createFineUploader（名称）；
};        
self.addAssetWithParams=函数（值、描述、名称）{
var资产=新社区资产（价值、说明、名称）；
self.communityAssets.push（资产）；
createFineUploader（名称）；
};        
}
var vc=新视图概述（）；
vc.addAssetWithParams（“http://placehold.it/240x160“，”Hola“，0）；
ko.applyBindings（vc，$（“#社区概览”）[0]）；
函数createFineUploader（intIndex）
{
vc.Uploaders[intIndex]=新的qq.FineUploader({
元素：$（'#fineUploader'+intIndex）[0]，
请求：{
终结点：“/Communities/FileUpload”
},
自动上传：对，
sizeLimit:4000000，//最大尺寸
验证：{
允许的扩展：['jpeg'，'jpg'，'gif']
},                
正文：{
uploadButton:“上载文件”
},
多重：假，
模板：“”+
“{dragZoneText}”+
“{uploadButtonText}”+
“
”+
'',
课程：{
成功：“警报成功”，
失败：“警报错误”
},
回调：{
onComplete:函数（id、名称、响应）{
if（response.success）
{
var asset=ko.utils.arrayFirst（vc.communityAssets（），函数（currentAsset）{
return currentAsset.Name==“fineUploader”+intIndex；//
我决定重新创建fileUploader（在可排序表中插入任何其他插件时都可能发生这种情况）

这有点容易

下面是代码（不在JSFIDLE中，因为我会浪费时间编写场景）

HTML


排序顺序
社区概览图像
社区概览图像描述



Javascript:

 var CommunityAsset = function(value, description, name, url) {
        this.URL = url;
        this.Value = value;  
        this.Description = ko.observable(description);
        this.Name = name;  
        this.FileName  = "";
        this.FileSize = "";          
    }
    var viewOverview = function()
    {
        var self = this;

        self.communityAssets = ko.observableArray();

        self.clearAsset = function(data, event) {

               self.communityAssets.remove(data);   

        };

        self.Uploaders = {};
        self.addAsset = function() {
            var name = self.communityAssets().length;
            var asset = new CommunityAsset("", "", name, "http://placehold.it/240x160");                    
            self.communityAssets.push(asset);
            createFineUploader(name);
        };


    self.addAssetWithParams = function(value, description, name, url) {            
        var asset = new CommunityAsset(value, description, name, url);        
        self.communityAssets.push(asset);

    };       
    self.recreateUploaders = function(arg) {   
        createFineUploader(arg.item.Name);
        if (arg.item.FileName != "")
        {
            $("#fineUploader"+arg.item.Name+" .qq-upload-list").append('<li class=" alert alert-success"><span class="qq-upload-file">'+arg.item.FileName+
            '</span><span class="qq-upload-size" style="display: inline;">'+arg.item.FileSize+'</span></li>');
        }            

function createFineUploader(intIndex)
{
    vc.Uploaders[intIndex] = new qq.FineUploader({
                        element: $('#fineUploader'+intIndex)[0],
                        request: {
                            endpoint: '/Communities/FileUpload'
                        },
                        autoUpload: true,
                        sizeLimit: 4000000, // max size
                        validation: {
                            allowedExtensions: ['jpeg', 'jpg', 'gif']
                        },                
                        text: {
                            uploadButton: '<i class="icon-upload icon-white"></i> Upload a file'
                        },
                        multiple: false,
                        template: '<div class="qq-uploader ">' +
                                '<pre class="qq-upload-drop-area "><span>{dragZoneText}</span></pre>' +
                                '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
                                '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                            '</div>',
                        classes: {
                            success: 'alert alert-success',
                            fail: 'alert alert-error'
                        },
                        callbacks: {
                            onComplete: function(id, name, response) {      
                                if (response.success) 
                                {
                                    var asset = ko.utils.arrayFirst(vc.communityAssets(), function(currentAsset) {
                                        return currentAsset.Name == intIndex; // <-- is this the desired seat?
                                    });

                                    if (asset) {
                                        var number = response.size;
                                        var size = "";
                                        if (number >= 1048576)
                                        {   
                                            number = number / 1048576;
                                            size = "MB";
                                        }
                                        else
                                        {
                                            number = number / 1024;
                                            size = "kB";

                                        }
                                        asset.FileSize = number.toFixed(1) + "" + size;
                                        asset.FileName = response.fileName;
                                        asset.Value = response.path;
                                    }                                     
                                }
                            }
                        },
                        debug: true
                    });

}              
     }; 
}
var vc = new viewOverview();  
ko.bindingHandlers.sortable.afterMove  = vc.recreateUploaders;
ko.applyBindings(vc, $("#communityOverview")[0]);

var CommunityAsset=函数（值、描述、名称、url）{
this.URL=URL；
这个。值=值；
此描述=可观察（描述）；
this.Name=Name；
this.FileName=“”；
this.FileSize=“”；
}
var viewOverview=函数（）
{
var self=这个；
self.communityAssets=ko.observearray（）；
self.clearAsset=功能（数据、事件）{
self.communityAssets.remove（数据）；
};
self.Uploaders={}；
self.addAsset=函数（）{
var name=self.communityAssets（）.length；
var资产=新社区资产（“，”，名称，“http://placehold.it/240x160");                    
self.communityAssets.push（资产）；
createFineUploader（名称）；
};
self.addAssetWithParams=函数（值、描述、名称、url）{
var资产=新社区资产（值、描述、名称、url）；
self.communityAssets.push（资产）；
};       
self.recreateUploaders=函数（arg）{
createFineUploader（arg.item.Name）；
如果（arg.item.FileName！=“”）
{
$（“#fineUploader”+arg.item.Name+”.qq上传列表”）.append（“
”+arg.item.FileName+
“+arg.item.FileSize+”
）；
}            
函数createFineUploader（intIndex）
{
vc.Uploaders[intIndex]=新的qq.FineUploader({
元素：$（'#fineUploader'+intIndex）[0]，
请求：{
终结点：“/Communities/FileUpload”
},
<table class="table">
<thead>
<tr>
    <th>
        Sort Order
    </th>
    <th>
        Community Overview Image
    </th>
    <th>
        Community Overview Image Description
    </th>
</tr>
</thead>
<tbody data-bind="sortable: communityAssets">
<tr>
    <td class="item">
        <span data-bind="text: $index"></span>
    </td>
    <td class="item">
        <div class="image-options">
            <div class="control-group">
                <div class="controls">
                    <img style="width:240px; height:160px;" data-bind="attr:{src: URL}"/>
                </div>
                <br/>
                <div data-bind="attr: {id: 'fineUploader' + Name}">
                </div>
            </div>
        </div>
        <!-- .image-options -->
        <a href="Javascript:void(0);" data-bind="click: $root.clearAsset ">Delete Asset</a>
    </td>
    <td class="item">
        <textarea class="input-block-level" rows="11" cols="3" data-bind="value: Description"></textarea>
    </td>
</tr>
</tbody>
</table>

 var CommunityAsset = function(value, description, name, url) {
        this.URL = url;
        this.Value = value;  
        this.Description = ko.observable(description);
        this.Name = name;  
        this.FileName  = "";
        this.FileSize = "";          
    }
    var viewOverview = function()
    {
        var self = this;

        self.communityAssets = ko.observableArray();

        self.clearAsset = function(data, event) {

               self.communityAssets.remove(data);   

        };

        self.Uploaders = {};
        self.addAsset = function() {
            var name = self.communityAssets().length;
            var asset = new CommunityAsset("", "", name, "http://placehold.it/240x160");                    
            self.communityAssets.push(asset);
            createFineUploader(name);
        };


    self.addAssetWithParams = function(value, description, name, url) {            
        var asset = new CommunityAsset(value, description, name, url);        
        self.communityAssets.push(asset);

    };       
    self.recreateUploaders = function(arg) {   
        createFineUploader(arg.item.Name);
        if (arg.item.FileName != "")
        {
            $("#fineUploader"+arg.item.Name+" .qq-upload-list").append('<li class=" alert alert-success"><span class="qq-upload-file">'+arg.item.FileName+
            '</span><span class="qq-upload-size" style="display: inline;">'+arg.item.FileSize+'</span></li>');
        }            

function createFineUploader(intIndex)
{
    vc.Uploaders[intIndex] = new qq.FineUploader({
                        element: $('#fineUploader'+intIndex)[0],
                        request: {
                            endpoint: '/Communities/FileUpload'
                        },
                        autoUpload: true,
                        sizeLimit: 4000000, // max size
                        validation: {
                            allowedExtensions: ['jpeg', 'jpg', 'gif']
                        },                
                        text: {
                            uploadButton: '<i class="icon-upload icon-white"></i> Upload a file'
                        },
                        multiple: false,
                        template: '<div class="qq-uploader ">' +
                                '<pre class="qq-upload-drop-area "><span>{dragZoneText}</span></pre>' +
                                '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
                                '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                            '</div>',
                        classes: {
                            success: 'alert alert-success',
                            fail: 'alert alert-error'
                        },
                        callbacks: {
                            onComplete: function(id, name, response) {      
                                if (response.success) 
                                {
                                    var asset = ko.utils.arrayFirst(vc.communityAssets(), function(currentAsset) {
                                        return currentAsset.Name == intIndex; // <-- is this the desired seat?
                                    });

                                    if (asset) {
                                        var number = response.size;
                                        var size = "";
                                        if (number >= 1048576)
                                        {   
                                            number = number / 1048576;
                                            size = "MB";
                                        }
                                        else
                                        {
                                            number = number / 1024;
                                            size = "kB";

                                        }
                                        asset.FileSize = number.toFixed(1) + "" + size;
                                        asset.FileName = response.fileName;
                                        asset.Value = response.path;
                                    }                                     
                                }
                            }
                        },
                        debug: true
                    });

}              
     }; 
}
var vc = new viewOverview();  
ko.bindingHandlers.sortable.afterMove  = vc.recreateUploaders;
ko.applyBindings(vc, $("#communityOverview")[0]);