0

我有一个使用 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>
4

1 回答 1

0

我不使用 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);
于 2013-11-15T15:53:15.377 回答