Knockoutjs Custom bindig with jQueryUI Dialog

Question

I'm trying to make a custom binding based on this code, http://jsfiddle.net/rniemeyer/WpnTU/ , Mine after a field checkbox is selected then open a jQueryUI dialog. Here is the code: http://jsfiddle.net/superjohn_2006/UFEg6/ , another question is it posible to acomplish this without a template.

<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

the following couple of lines need to be changed.

span data-bind="value: field"

for:

span data-bind="text: $data.field"

and,

self.selectedField();

for:

self.selectedField(formatToAdd);

modified code is in the same jsFiddle, jus add: /1/ to the end of the url address.