javascript - YUI と Knockout JS を使用して、ドロップされた項目からフォームにデータを追加するにはどうすればよいですか?

Question

Knockout JS を使用して、JSON データが入力されたリストがあります。

YUI デリゲートを使用すると、各リスト要素はドラッグ可能で、複数のドロップ ターゲットがあります ( YUI を使用dd-drop-plugin)。

ドロップ ターゲットの 1 つにリスト アイテムをドロップすると、既存のフォームに、ドロップされたアイテムのデータ (リストには表示されていないが、データ モデルにあるデータであっても) からのデータが取り込まれます。何もドロップされていない場合でも、ユーザーがフォームを編集して送信できるようにしたいと考えています。

私の元の見解は次のとおりです。

 <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 dd があります。

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>