对于我的第一个knockout.js项目，我决定保持简单，并创建一个SimpleGrid，其中包含一个单选按钮列表。
我可以使用自定义模板显示单选按钮列表，但无法选择值。
我现在有两件事要做。
1.为每个表行的单选列表给予唯一的名称。当前，所有行上的所有单选按钮都具有相同的名称。
1.在按钮单击事件中返回选定的单选值。

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版本的link，显示了我的最新情况。