Question

对于我的第一个ko项目，我决定保持简单并使用包含单选按钮列表的列创建一个SimpleGrid。

我可以使用自定义模板显示单选按钮列表，但无法获取所选值。

我现在要做的事情有两件事。

为每个表格行的单选列表指定唯一名称。目前，所有行上的所有单选按钮都具有相同的名称。
在按钮点击事件中返回选定的无线电值。

HTML代码

<div data-bind='simpleGrid: gridViewModel, simpleGridTemplate: "custom_grid_template"'></div>

<script type="text/html" id="custom_grid_template">
    <table class="ko-grid table table-bordered table-condensed table-nowrap" cellspacing="0">
        <thead>
            <tr data-bind="foreach: columns">
                <th data-bind="text: headerText"></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: itemsOnCurrentPage">
            <tr data-bind="foreach: $parent.columns">
                <!--ko if: typeof rowText == 'object' && typeof rowText.action == 'function'-->
                <td>
                    <button data-bind="click:rowText.action($parent)">action</button></td>
                <!-- /ko -->

                <!--ko if: headerText == 'Status'-->
                <td>
                    <input data-bind="checked: rowText.status" value="A" type="radio" name="statusGroup" />A
                    <input data-bind="checked: rowText.status" value="B" type="radio" name="statusGroup" />B
                    <input data-bind="checked: rowText.status" value="C" type="radio" name="statusGroup" />C
                </td>
                <!-- /ko -->

                <!--ko ifnot: headerText == 'status' || (typeof rowText == 'object' && typeof rowText.action == 'function')-->
                <td data-bind="text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] "></td>
                <!--/ko-->
            </tr>
        </tbody>
    </table>
</script>

JS代码

var viewModel = function () {
    var self = this;

    self.defaultPageSize = 4;

    self.currentPage = ko.observableArray();
    self.pageSize = ko.observable(self.defaultPageSize);
    self.currentPageIndex = ko.observable(0);
    self.comments = ko.observableArray();
    self.sorttype = "asc";

    self.currentPage = ko.computed(function () {
        var pageSize = parseInt(self.pageSize(), self.defaultPageSize);
        var startIndex = pageSize * self.currentPageIndex();
        var endIndex = startIndex + pageSize;
        return self.comments.slice(startIndex, endIndex);
    });

    self.nextPage = function () {
        if (((self.currentPageIndex() + 1) * self.pageSize()) < self.comments().length) {
            self.currentPageIndex(self.currentPageIndex() + 1);
        }
        else {
            self.currentPageIndex(0);
        }
    }


    self.previousPage = function () {
        if (self.currentPageIndex() > 0) {
            self.currentPageIndex(self.currentPageIndex() - 1);
        }
        else {
            self.currentPageIndex((Math.ceil(self.comments().length / self.pageSize())) - 1)
        }
    }

    self.sortTable = function (viewModel, e) {
        var orderProp = $(e.target).attr("data-column")
        self.comments.sort(function (left, right) {
            leftVal = left[orderProp];
            rightVal = right[orderProp];
            if (self.sortType == "asc") {
                return leftVal < rightVal ? 1 : -1;
            }
            else {
                return leftVal > rightVal ? 1 : -1;
            }
        });

        self.sortType = (self.sortType == "asc") ? "desc" : "asc";
    }

    self.markApprove = function (comment) {
        //1
        alert(comment.author);
    }

    self.markDelete = function (comment) {
        //2
        alert(comment.author);
    }

    self.show = function (element, ww, ee) {
        //alert($(element));
        //alert($(parent));
        $(element).show();

    }

    self.hide = function (element, ww, ee) {
        //element.hide;
        $(element).hide();
    }
}

var vm = new viewModel();
vm.comments([
    { videoid: 1000, title: "Item 1", commentid: 10, comment: "Well Done!", author: "Fred", commentdate: "@DateTime.Now.ToLongDateString()", status: "" },
    { videoid: 2000, title: "Item 2", commentid: 11, comment: "Good Job!", author: "Bill", commentdate: "@DateTime.Now.ToLongDateString()", status: "" },
    { videoid: 3000, title: "Item 3", commentid: 12, comment: "Nice Work", author: "Fred", commentdate: "@DateTime.Now.ToLongDateString()", status: "" },
    { videoid: 4000, title: "Item 4", commentid: 13, comment: "Fantastic", author: "Bill", commentdate: "@DateTime.Now.ToLongDateString()", status: "" },
    { videoid: 5000, title: "Item 5", commentid: 14, comment: "Splendid", author: "Fred", commentdate: "@DateTime.Now.ToLongDateString()", status: "" },
    { videoid: 6000, title: "Item 6", commentid: 15, comment: "Nice....", author: "Bill", commentdate: "@DateTime.Now.ToLongDateString()", status: "" },
    { videoid: 7000, title: "Item 7", commentid: 16, comment: "Great", author: "Fred", commentdate: "@DateTime.Now.ToLongDateString()", status: "" },
    { videoid: 8000, title: "Item 8", commentid: 17, comment: "Job well done", author: "Bill", commentdate: "@DateTime.Now.ToLongDateString()", status: "" }
]);
ko.applyBindings(vm);

这是我的jsfiddle版本的链接，显示了我的目标。

http://jsfiddle.net/u4Ymb/3/

Answer 1

您可以将绑定上下文用于所选单选按钮的唯一名称和值。

1。对于唯一名称 ： - 使用＆＃34; attr＆＃34;数据绑定并给出名称属性，如： -

attr:{name:'sizeGroup'+ $parentContext.$index()}

2。获取所选单选按钮的值 ： - 为网格中的每个记录创建另一个可观察属性，用于存储所选单选按钮的值，并且在已检查的绑定中，您必须使用该可观察对象。

//Selected Observable
{ name: "Well-Travelled Kitten",selected:ko.observable(), sales: 352, price: 75.95, size:["a","c","b"]}

//html binding
<input data-bind="checked: $parent.selected,attr:{name:'sizeGroup'+ $parentContext.$index()}" value="a" type="radio" />A

Fiddle Demo

在一列中使用单选按钮列表敲除SimpleGrid

1 个答案: