KnockoutJS - Пользовательские привязки с аргументами

Я пытаюсь написать пользовательские привязки нокаута к некоторым функциям "рендеринга" JavaScript, чтобы я мог делать такие вещи, как:

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

За кулисами эта гипотетическая цифра будет делать что-то вроде:

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

Я дал это определение go, и JavaScript действительно не понравилось, что я пытаюсь абстрагироваться от цифрового ключа. Как мне подойти к проблеме?

Ответ 1

Попробуйте это.

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

И привязка

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

Ответ 2

Ответы, представленные здесь, - это приятные трюки, но нокаут действительно имеет способ сделать это.

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

и в вашей пользовательской привязке:

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)

  }
}

Приветствия:)

Ответ 3

Альтернативный вариант заключается в добавлении атрибута пользовательских данных в элемент, который требует дополнительного аргумента для привязки:

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

И затем внутри связывания вы можете извлечь значение атрибута из целевого элемента.

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

Ответ 4

Вы можете передать в качестве параметра для своей привязки объект. Что-то вроде:

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

В вашей модели просмотра соответствующий объект:

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

Затем в пользовательской привязке, используя valueAccessor, вы можете получить доступ к любому начальному параметру, который вам нужен для вашей службы.

var myObject = valueAccessor();
myObject.interest();
myObject.format;

Ответ 5

Вы могли бы что-то сделать, выполняя функцию или вычислив наблюдаемый вызываемый интерес, и если ее функция может принимать параметр. Тогда это будет иметь вид: data-bind = "numeral: interest ('0%')" Из этого вы могли бы затем написать обработчик привязки для выполнения js для вашей цели.