javascript - 通过拖放将 KnockoutJS 与 JQuery 结合使用

Question

我希望每当我将项目拖到 DROP THINGS HERE div 上时都会发生 $root.addField 操作。就像单击添加字段按钮时发生的情况一样。

这是一个 fiddle ，你可以用它来玩 -- http://jsfiddle.net/pt6k26kh/

JS

$(document).ready(function(){
var initialData = [
    { formTitle: "formTitle", formDescription: "formDesc", fields: [
        { fieldId: "text1", title: "title", description: "description Field", isReq: true },
        { fieldId: "text2", title: "ttitle22", description: "description Field 2", isReq: false }]
    },
      { formTitle: "formTitle", formDescription: "formDesc", fields: [
        { fieldId: "text1", title: "title", description: "description Field", isReq: true },
        { fieldId: "text2", title: "ttitle22", description: "description Field 2", isReq: false }]
    }

];

var FieldsModel = function(fieldTemplates) {
    var self = this;
    self.fieldTemplates = ko.observableArray(ko.utils.arrayMap(fieldTemplates, function(fieldTemplate) {
        return { 
            formTitle: fieldTemplate.formTitle, formDescription: fieldTemplate.formDescription, 
            fields: ko.observableArray(fieldTemplate.fields) };

    }));

    self.addfieldTemplate = function() {
        self.fieldTemplates.push({
            formTitle: "",
            formDescription: "",
            fields: ko.observableArray()
        });
    };

    self.removefieldTemplate = function(fieldTemplate) {
        self.fieldTemplates.remove(fieldTemplate);
    };

    self.addField = function(fieldTemplate, e) {
        console.log("---addField");
        console.log(e);

        fieldTemplate.fields.push({
            fieldId: "text",
            title: "",
            description: "",
            isReq: false
        });

    };

    self.removeField = function(field) {
        $.each(self.fieldTemplates(), function() { this.fields.remove(field) })
    };

    self.save = function() {
        self.lastSavedJson(JSON.stringify(ko.toJS(self.fieldTemplates), null, 2));
    };

    self.lastSavedJson = ko.observable("")
};

ko.applyBindings(new FieldsModel(initialData));

});

HTML

    <h2>Forms</h2>
    <div id='contactsList'>
        <table class='contactsEditor'>
            <tr>
                <th>Form Title</th>
                <th>Form Description</th>
                <th>Fields</th>
            </tr>
            <tbody data-bind="foreach: fieldTemplates">
                <tr>
                    <td>
                        <input data-bind='value: formTitle' />
                        <div><a href='#' data-bind='click: $root.removefieldTemplate'>Delete</a></div>
                    </td>
                    <td><input data-bind='value: formDescription' /></td>
                    <td>
                        <table>
                            <tbody data-bind="foreach: fields">
                                <tr>
                                    <td><input data-bind='value: title' /></td>
                                    <td><input data-bind='value: description' /></td>
                                    <td><input type="checkbox" data-bind='checked: isReq' /></td>
                                    <td><a href='#' data-bind='click: $root.removeField'>Delete</a></td>
                                </tr>
                            </tbody>
                        </table>
                        <a href='#' data-bind='click: $root.addField'>Add field</a>     

                        <div class="dropped" data-bind='event: {drop: $root.addField}'>DROP THINGS HERE</div>                  
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="droppings" >
        <div data-bind='drag: {value: $data}' class="toDrop">toDrop 1</div>
        <div data-bind='drag: {value: $data}' class="toDrop">toDrop 2</div>
        <div data-bind='drag: {value: $data}' class="toDrop">toDrop 3</div>
    </div>
    <div class="dropped" data-bind='event: {drop: $root.addField}'>DROP THINGS HERE</div>


    <script type="text/javascript">

        $(".droppings .toDrop").draggable({
            helper: "clone",
            drop: function(event, ui){
            }
        }); 

        $(".dropped").droppable({
            drop: function(event, ui){
                $(".dropped").append('<div class="beenDropped">beenDropped</div>');
                console.log("dropped");
            }
        });

    </script>

Answer 1

根据上面的讨论和我对问题的理解，我认为我们应该做以下事情。

添加一个名为的新方法

self.globalAddField = function(){
   self.addField(self.fieldTemplates()[self.fieldTemplates().length-1])
}

新方法将 self.fieldTemplates() 的最后一项作为参数传递给现有的 addField 方法。其余功能将保持不变。

修改 HTML 如下。

<div class="dropped" data-bind='event: {drop: $root.globalAddField}'>DROP THINGS HERE</div>

更新了 fiddle 。 http://jsfiddle.net/sherin81/pt6k26kh/2/