Как хранить записи выбора времени и даты в наблюдаемом массиве? - PullRequest
Новая
       76

Как хранить записи выбора времени и даты в наблюдаемом массиве?

0 голосов
/ 29 апреля 2020

Я делюсь ссылкой на то, что я хочу сделать ( последняя ссылка, т.е. дата / время )

https://rsuite.github.io/multi-date-picker/

После этого я хочу сохранить эти записи в наблюдаемом массиве

Примечание: Я хочу сделать все это в простом блокноте и с jQuery датой таймер 

function Friend() {
  $(document).ready(function() {
      $("#datetime").datetimepicker();
  });
  var self = this;
  self.dates = ko.observable();
  self.removeFriend=function() {
    obj.friends.remove(self);
  }
}
var obj = {
  friends:ko.observableArray([new Friend()])
};
obj.addFriend=function() {
  obj.friends.push(new Friend());
}
ko.applyBindings(obj);
<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>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">
<h1>Hello JS</h1>
<ul data-bind="foreach:friends">
  <li>
    <input readonly type="text" id="datetime" data-bind="value:dates" />
    <button data-bind="click: removeFriend">Remove Employee</button>
  </li>
</ul>
<button data-bind="click: addFriend">Add Employee</button>

Я очень новичок в этом.

1 Ответ

0 голосов
/ 01 мая 2020

Есть несколько проблем с вашим кодом:

  1. Основная проблема заключается в том, что вы инициализируете input непосредственно с jquery, в то время как вы должны делегировать эту ответственность пользовательской привязке , К счастью, другие люди уже сделали эту работу за вас (см. здесь и здесь . В приведенном ниже коде я использую приведенный там код).

  2. Кроме того, у каждого вновь добавленного сотрудника есть одно и то же значение id, поэтому вы должны присвоить каждому уникальный идентификатор или просто избавиться от него - что я и сделал ниже.

  3. removeFriend должен быть определен в родительском объекте.

Также обратите внимание, что средство выбора даты, используемое на веб-сайте , на который вы ссылаетесь, не является библиотекой с именем jquery-datetimepicker, на который вы ссылаетесь в своем вопросе, и, таким образом, я имею в виду.

Вот рабочий (переформатированный) код: 

$(document).ready(function() {
  initCustomBinding();
  initFriends();
});
function initFriends() {
  var obj = {
    friends: ko.observableArray([new Friend()]),
    addFriend: function() {
      obj.friends.push(new Friend());
    },
    removeFriend: function($data) {
      obj.friends.remove($data);
    }
  };
  ko.applyBindings(obj);
}
function Friend() {
  var self = this;
  self.dates = ko.observable();
}
function initCustomBinding() {
  ko.bindingHandlers.datetimepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var $el = $(element);
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $el.datetimepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            var $el = $(element);
            observable($el.datetimepicker("getDate").Value);
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $el.datetimepicker("destroy");
        });

    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element),
            current = new Date($el.val());

        if (value - current !== 0) {
            $el.datetimepicker("setDate", value);
        }
    }
  };
}
<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>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">
<h1>Hello JS</h1>
<ul data-bind="foreach:friends">
  <li>
    <input readonly type="text" data-bind="datetimepicker:dates" />
    <button data-bind="click: $root.removeFriend">Remove Employee</button>
  </li>
</ul>
<button data-bind="click: addFriend">Add Employee</button>
...