Ich versuche, benutzerdefinierte Knockout-Bindungen für einige JavaScript-Rendering-Funktionen zu schreiben, damit ich Folgendes tun kann:

<td data-bind="numeral('0%'): interest">

Hinter den Kulissen würde diese hypothetische Zahl so etwas wie Folgendes bewirken:

ko.bindingHandlers.numeral(fmt) = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContent) {
    var unwrapped = ko.unwrap(valueAccessor()), allBindings = allBindingsAccessor();
    $(element).html(numeral(unwrapped).format(fmt));
  }
} 

Ich habe diese Definition ausprobiert, und JavaScript mochte es wirklich nicht, wenn ich versuchte, den Zifferntasten zu abstrahieren. Wie soll ich das Problem angehen?

15
nomen 28 Nov. 2013 im 11:33

5 Antworten

Beste Antwort

Versuchen Sie es so.

<td data-bind="numeral: interest, fmt : '0%'">

Und die Bindung

ko.bindingHandlers.numeral = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContent) {
    var unwrapped = ko.unwrap(valueAccessor()), allBindings = allBindingsAccessor();
    var fmtVal = allBindings.get('fmt') || '0%'; 
    $(element).html(numeral(unwrapped).format(fmtVal));
  }
} 
17
Jernej Novak 28 Nov. 2013 im 08:36

Sie könnten etwas tun, um eine Funktion oder eine berechnete beobachtbare Funktion namens Interesse zu erstellen, und wenn es sich um eine Funktion handelt, kann sie einen Parameter annehmen. Es hätte dann die Form: data-bind = "numeral :interest ('0%')" Daraus könnten Sie dann den Bindungshandler schreiben, um js für Ihren Zweck zu rendern.

1
Stuart Paton 28 Nov. 2013 im 07:41

Eine alternative Option besteht darin, dem Element, für das das zusätzliche Argument für die Bindung erforderlich ist, ein benutzerdefiniertes Datenattribut hinzuzufügen:

<td data-bind="numeral: interest" data-format="0%">

Und dann können Sie innerhalb der Bindung den Wert des Attributs aus dem Elementziel extrahieren.

    ko.bindingHandlers.numeral = {
      init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContent) {
           // ... some more code
            var fmtVal = $(element).data("format") || '0%'; 
           // ... do stuff with fmtVal 
    }}
5
Carlos Pinto 11 Mai 2015 im 21:53

Die hier gegebenen Antworten sind nette Tricks, aber Knockout hat tatsächlich eine Möglichkeit, dies zu tun.

<td data-bind="numeral: {interest: interest, fmt: '0%' }"> 

Und in Ihrer benutzerdefinierten Bindung:

ko.bindingHandlers.numeral(fmt) = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContent) {
    var unwrapped = ko.utils.unwrapObservable(valueAccessor());
    // unwrapped.interest... = interest
    // unwrapped.fmt... = fmt ('0%' in this case)

  }
} 

Prost :)

30
Jeroen Landheer 23 Dez. 2015 im 14:17

Sie können als Parameter für Ihre benutzerdefinierte Bindung ein Objekt übergeben. Etwas wie:

<td data-bind="numeral: numeralOptions">

In Ihrem Ansichtsmodell das entsprechende Objekt:

numeralOptions = {
    interest: ko.observable(808),
    format: '0%'
}

In der benutzerdefinierten Bindung können Sie dann mit valueAccessor auf alle Anfangsparameter zugreifen, die Sie für Ihre Aufgabe benötigen.

var myObject = valueAccessor();
myObject.interest();
myObject.format;
5
Ivan Malagon 6 Aug. 2015 im 12:14