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

需要更改以下几行。

span data-bind =“value：field”

有：

span data-bind =“text：$ data.field”

和，

self.selectedField（）;

有：

self.selectedField（formatToAdd）;

修改后的代码在同一个jsFiddle中，jus add：/ 1 / 到网址的末尾。

使用jQueryUI对话框Knockoutjs自定义绑定

1 个答案: