Comment faire pour que KnokoutJS et ClipboardJS travaillent ensemble?
j'essaie de copier au bloc-notes quelques informations de Knockout foreach:
<tbody data-bind="foreach: selections">
<tr>
<td>
<a href="#" class="copy_btn" data-bind="attr: { 'data-clipboard-text' : name}"><i class="fa fa-copy"></i></a>
</td>
</tr>
</tbody>
avec ClipboardJS:
var btns = document.querySelectorAll('a.copy_btn');
var clipboard = new Clipboard(btns);
clipboard.on('success', function (e) {
console.log(e);
});
clipboard.on('error', function (e) {
console.log(e);
});
mais il ne copie pas. Ce que je fais mal?
1
demandé sur
devspec
2016-10-31 00:33:32
2 réponses
alors, peut-être que quelqu'un a besoin de:
ko.bindingHandlers.clipboard = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var clipboard = new Clipboard(element);
}
};
et
<a href="#" class="copy_btn" data-bind="clipboard, attr: { 'data-clipboard-text' : name, title: 'Copy to clipboard'}"><i class="fa fa-copy"></i></a>
1
répondu
devspec
2016-10-30 22:47:00
très bien, merci @devspec pour votre réponse initiale. Je l'ai construit sur des bases cruciales:
donc mon dernier handler est:
ko.bindingHandlers.clipboard = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// This will be called when the binding is first applied to an element
// Set up any initial state, event handlers, etc. here
var options = ko.unwrap(valueAccessor());
if(options.textComputed) {
options.text = function(nodeToIgnore) { return options.textComputed(); };
}
if(options.onmodal) {
options.container = element;
}
var cboard = new Clipboard(element, options);
if(options.success) {
cboard.on('success', options.success);
}
if(options.error) {
cboard.on('error', options.error);
}
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
// This will be called when the element is removed by Knockout or
// if some other part of your code calls ko.removeNode(element)
cboard.destroy();
});
},
}
et un exemple d'usage est:
Le Code Html:
<a href="#" data-bind="clipboard: { onmodal: true, textComputed: command, success: function(event) { copyCommandResult(true, event); },
error: function(event) { copyCommandResult(false, event); }}"><small
data-bind="text: clipboardLink ">copy to clipboard</small></a>
sur la commande view model est un computed, si c'était une fonction qui renvoie une chaîne (sans argument) vous pourriez utiliser l'attribut text seulement
et le copyCommandResult est simplement:
self.copyCommandResult = function(success, e) {
// console.log("Copy to clipboard success? " + success)
// console.info('Action:', e.action);
// console.info('Text:', e.text);
// console.info('Trigger:', e.trigger);
if(success) {
self.clipboardLink("Copied successfully!");
} else {
self.clipboardLink("Could not copy to clipboard");
}
setTimeout(function(){ self.clipboardLink(DEFAULT_CLIPBOARD_LINK_TEXT); }, 3000);
}
0
répondu
João Antunes
2017-12-07 12:02:26