Как добавить данные из отброшенного элемента в форму, используя YUI и Knockout JS?
У меня есть список, который заполняется JSON-данными, используя Knockout JS.
Используя делегаты YUI, каждый из элементов списка является перетаскиваемым, с несколькими назначениями отбрасывания (используя YUI dd-drop-plugin
).
Когда я перетаскиваю элемент списка на одну из целей перетаскивания, я хочу, чтобы существующая форма заполнялась данными из данных отброшенного элемента (даже данными, не представленными в списке, но находящимися в модели данных). Если ничего не пропущено, я все же хочу, чтобы пользователь мог редактировать форму и отправлять ее.
Мой первоначальный вид:
<ol class="timeline" data-bind="foreach: $data">
<li>
<p data-bind="text: Title"></p>
</li>
</ol>
Который населен:
$.getJSON(timelineURL, function(data) {
var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel, document.getElementById("preleads"));
});
Тогда у меня есть YUI дд:
YUI().use('dd-delegate', 'dd-drag','dd-drop-plugin', 'dd-proxy', function(Y) {
// Make all the .timeline items draggable
var draggables = new Y.DD.Delegate({
container: ".timeline",
nodes: "li"
});
// ... some setting up of the proxy elements, etc.
var dropNew = Y.one("#addStoryForm").plug(Y.Plugin.Drop);
dropNew.drop.on("drop:hit", function(e){
// The bit I'm missing
});
});
Который должен заполнить форму данными из отброшенного элемента:
<form data-bind="with: droppedItem">
<input type="text" data-bind="value: Title" />
<input type="text" data-bind="value: SomethingElse" />
<button type="submit" />
</form>
1 ответ
Я не использую YUI, но я немного погуглил. Я предполагаю, что это должно быть что-то вроде этого:
dropNew.drop.on("drop:hit", function(e){
var element = e.drag, // YUI bit I'm unsure about
data = ko.dataFor(element);
droppedItem(data);
});
Я совершенно уверен, что когда вы делаете это таким образом, любые изменения, которые вы вносите в форму, немедленно отражаются в списке. Если вы не хотите этого, вы должны сделать немного больше работы:
data = ko.toJS(ko.dataFor(element));
droppedItem().Title(data.Title);
droppedItem().SomethingElse(data.SomethingElse);