Question

我有一个列表，使用Knockout JS填充了JSON数据。

使用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 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>

Answer 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);

如何使用YUI和Knockout JS将已删除项目中的数据添加到表单中？

1 个答案: