Wie können KnokoutJS und ClipboardJS zusammenarbeiten?

Question

Ich versuche, einige Informationen von Knockout foreach in die Zwischenablage zu kopieren:

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

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

Aber es ist das Kopieren nicht. Was mache ich falsch?

Answer 1

Also, vielleicht jemand braucht:

ko.bindingHandlers.clipboard = { 
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var clipboard = new Clipboard(element); 
    } 
}; 

und

<a href="#" class="copy_btn" data-bind="clipboard, attr: { 'data-clipboard-text' : name, title: 'Copy to clipboard'}"><i class="fa fa-copy"></i></a> 

Answer 2

Alrighty dank @devspec für Ihre erste Antwort. Ich baute auf es in einigen entscheidenden Punkten:

so meine letzte Bindung Handler ist:

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(); 
        }); 
     }, 
} 

Und ein Beispiel für die Nutzung ist:

Die 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> 

auf die view model command ist eine berechnete, wenn es eine Funktion war, die eine Zeichenkette (ohne ein Argument) zurückgab, konnte das Textattribut nur

012 verwendet werden

Und die copyCommandResult ist einfach:

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

    }