Knockoutjs jQueryUI로 사용자 정의 바인딩 대화 상자

Question

이 코드를 기반으로 사용자 정의 바인딩을 만들려고합니다. http://jsfiddle.net/rniemeyer/WpnTU/, 필드 체크 박스를 선택한 후 내 jQueryUI 대화 상자를 엽니 다. 다음은 코드입니다. http://jsfiddle.net/superjohn_2006/UFEg6/, 또 다른 질문은 템플리트없이 이것을 실현하는 것입니다.

<table> 
    <tbody data-bind="foreach: records"> 
     <tr data-bind="foreach: fields"> 
      <th align="left"> 
       <input type="checkbox" data-bind="checked: chkedValue" /><span data-bind=" text: field"></span> 
      </th> 
     </tr> 
     <tr data-bind="foreach: fields"> 
      <th align="left"><a data-bind="click: $root.addFormatting" href="#">Add Formatting</a></th> 
     </tr> 
     <tr data-bind="foreach: row"> 
      <td data-bind="text: value"></td> 
     </tr> 
    </tbody> 
</table> 

<div id="details" data-bind="jqDialog: { autoOpen: false, resizable: false, modal: true }, template: { name: 'editTmpl', data: selectedField }, openDialog: selectedField"> 
</div> 

<script id="editTmpl" type="text/html"> 
    <p> 
     <label>Selected Field: </label> 
     <span data-bind="value: field" /> 
    </p>  
    <button data-bind="jqButton: {}, click: $root.accept">Accept</button> 
    <button data-bind="jqButton: {}, click: $root.cancel">Cancel</button> 
</script> 

**The model 

// custom binding 
    ko.bindingHandlers.jqDialog = { 
     init: function(element, valueAccessor) { 
      var options = ko.utils.unwrapObservable(valueAccessor()) || {}; // initialize a jQuery UI dialog 
      $(element).dialog(options); 

      // handle disposal 
      ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
       $(element).dialog("destroy"); 
      }); 
     } 
    }; 
//custom binding handler that opens/closes the dialog 
ko.bindingHandlers.openDialog = { 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     if (value) { 
      $(element).dialog("open"); 
     } else { 
      $(element).dialog("close"); 
     } 
    } 
}; 
//custom binding to initialize a jQuery UI button 
ko.bindingHandlers.jqButton = { 
    init: function(element, valueAccessor) { 
     var options = ko.utils.unwrapObservable(valueAccessor()) || {}; 

     //handle disposal 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).button("destroy"); 
     }); 

     $(element).button(options); 
    }  
}; 

var resultsData = [ 
    { fields: [{ field: "Field1", chkedValue: false }, { field: "Field2", chkedValue: false }] }, 
    { row: [{ value: "1" }, { value: "True" }] }, 
    { row: [{ value: "2" }, { value: "False" }] } 
]; 

var TableModel = function (records) { 
    var self = this; 
    self.records = ko.observableArray(ko.utils.arrayMap(records, function (record) { 
     return { fields: ko.observableArray(record.fields), row: ko.observableArray(record.row) }; 
    })); 
    self.selectedField = ko.observable(); 
    self.addFormatting = function (formatToAdd) { 
     self.selectedField(); 
    }; 
}; 

this.accept = function() { 
}, 
this.cancel = function() { 
} 

ko.applyBindings(new TableModel(resultsData)); 

Answer 1

다음 줄 몇 개를 변경해야합니다.

스팬 데이터 바인드 = "값 : 필드"

님

스팬 데이터 바인드 = "텍스트한다 : $ data.field"

및

self.selectedField();

님

self.selectedField (formatToAdd);

수정 된 코드는 동일한 jsFiddle에 있습니다. jus는 URL 주소 끝에/1/ 을 추가합니다.