Knockoutjs

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加：/ 1/ 到結尾的url地址。