0

我正在尝试基于此代码 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));
4

1 回答 1

0

以下几行需要更改。

跨度数据绑定=“值：字段”

为了：

跨度数据绑定=“文本：$data.field”

和，

self.selectedField();

为了：

self.selectedField(formatToAdd);

修改后的代码在同一个jsFiddle中，只需在url地址末尾添加：/1/即可。

于 2013-07-11T14:29:50.483 回答