KnockoutJS를 드래그 앤 드롭으로 JQuery와 함께 사용

Question

DROP THINGS HERE div에 드래그 할 때마다 $root.addField 작업을 수행하고 싶습니다. add field 버튼을 클릭하면 어떻게됩니까? 당신이 그것으로 재생할 수 있습니다 여기에

는 바이올린입니다 - 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

우리가해야한다고 생각하는 문제의 다음과 같은.

은 기존 addField 방법에 인수로 self.fieldTemplates()의 마지막 항목을 통과 할 새로운 방법

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

라는 새로운 방법을 추가합니다. 나머지 기능은 동일하게 유지됩니다.

아래와 같이 HTML을 수정하십시오.

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

바이올린이 업데이트되었습니다. http://jsfiddle.net/sherin81/pt6k26kh/2/