私はノックアウト.jsとノックアウト-sortable.jsを使用しています。ソート可能なテーブルを作成するため。このテーブルの列の 1 つは画像をアップロードする必要があり、テーブルを並べ替えることができます。アップロードは正常に機能しますが、テーブルを並べ替えると、細かいアップローダーのボタンが表示されず、すべての属性が失われます。
フィドル: http://jsfiddle.net/XdevK/6/
再現する手順：
- [アセットを追加] をクリックします
- もう一度 [アセットを追加] をクリックします。
- 2 番目のアセットを最初の位置に移動します。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
});
}
HTML
<div class="tab-pane" id="communityOverview">
<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: Value}" />
</div>
<br />
<div data-bind="attr: {id: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>
<a href="#" data-bind="click: addAsset">Add Task</a>
</div>
私が実際に起こっていると思うのは、ソータブルがテーブルを再作成するということです。これは、並べ替えのコールバックで Fineuploader ライブラリの再作成を実行する必要があることを意味します。
並べ替えが完了したら、ボタンをそのままにしておくにはどうすればよいですか?