Как добавить данные из отброшенного элемента в форму, используя 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);
Другие вопросы по тегам