knockout.js - Fineuploader button missed after moving sortable table. Plugin elements missed in sortable table if row moved -
i have been working knockout.js , knockout-sortable.js. in order create sortable table. 1 of columns of table should upload images, , still able sort table. upload works fine, when sort table button of fine uploader missed, , attributes.
fiddle: http://jsfiddle.net/xdevk/6/
steps reproduce:
- click add asset
- click again add asset.
- move second asset first position. fineuploader button missed.
what happening div content removed once sort done.
js code:
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 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; // <-- 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> what think happening sortable recreates table. means should run recreation of fineuploader library on callback of sort.
how can mantain button stay once sort done?
i decided recreate fileuploader (this happen other pluggin inserted sortable table).
it kind of easy.
here's code (not in jsfiddle because lose time making scenario).
html
<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> 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 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; // <-- 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]); the magic done ko.bindinghandlers.sortable.aftermove = vc.recreateuploaders; after row moved recreate the pluggin creation. there's portion added of filename, done because if uploaded file correctly label of file name removed if row moved, add filename label again.
hope helps someone!
Comments
Post a Comment