JQuery триггер выбрать изменение значения в привязке данных на сайте с помощью Knockout.js - возможно? - PullRequest
Новая
       34

JQuery триггер выбрать изменение значения в привязке данных на сайте с помощью Knockout.js - возможно?

0 голосов
/ 20 сентября 2019

Мне нужно активировать выбранное значение на веб-сайте, используя Knockout.js, используя расширение браузера.

Я использую jQuery, но я немного растерялся с методами ko триггера.

Это выбор, который я хочу изменить значение: 

<select name="subDuration" class="select number_weeks" id="sub_duration"
data-bind="
    options: options.durationOptions, 
    optionsText: 'val', 
    optionsValue: 'key', 
    optionsCaption: 'Select subscription duration', 
    value:options.duration,
    event:{
        change: options.updateDuration,
        blur: options.validateDuration
    },
    attr:{
        'aria-invalid': options.hasDurationError,
        'aria-describedby': options.hasDurationError() ? 'sub_duration_error' : false
    }
" 
data-ctp-cont="Direct Debit Payments">
</select>

$("#sub_duration").focus().trigger("change", options).val(2).blur()

Когда я использую строку cde выше, это значение равно 2, но проверка сайта выполняется на размытиеи не признает его действительным.Если я выбираю что-то еще или затем 2 снова, это делает.Такое ощущение, что изменение jQuery не запускается при проверке сайта.

Есть идеи о том, чего мне здесь не хватает?К сожалению, я никогда не работал с knockout.js ...

Любая помощь приветствуется.Спасибо!

1 Ответ

0 голосов
/ 20 сентября 2019

Вероятно, проще непосредственно обновить значения в базовой модели представления нокаута.Оттуда вы также можете запускать методы, связанные с обработчиками событий. 

// The website part
ko.applyBindings({
  options: {
    duration: ko.observable(1),
    durationOptions: [
      { key: 0, val: "Option 0" },
      { key: 1, val: "Option 1" },
      { key: 2, val: "Option 2" }
    ],
    updateDuration: () => console.log("Updated duration"),
    validateDuration: () => console.log("Validated duration"),
    hasDurationError: ko.observable(false)
  }
});

// Your plugin
$("button").click(function(e) {
  const select = document.getElementById("sub_duration");
  const vm = ko.dataFor(select);
  
  // Change the value:
  vm.options.duration(2);  

  // Trigger the event handlers
  vm.options.updateDuration();
  vm.options.validateDuration();
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>



<select id="sub_duration" data-bind="
  options: options.durationOptions, 
  optionsText: 'val', 
  optionsValue: 'key', 
  optionsCaption: 'Select subscription duration', 
  value:options.duration,
  event:{
    change: options.updateDuration,
    blur: options.validateDuration
  },
  attr:{
    'aria-invalid': options.hasDurationError,
    'aria-describedby': options.hasDurationError() ? 'sub_duration_error' : false
  }
"></select>

<div>
Trigger your jQuery code: <button>Update value</button>
</div>

Обратите внимание, что updateDuration и validateDuration могут потребовать передачи некоторого события, например объекта и контекста this, для корректной работы, в зависимости от их реализаций.

...