Knockout.js 在一列中删除单选按钮列表的SimpleGrid

对于我的第一个knockout.js项目，我决定保持简单，并创建一个包含单选按钮列表的列的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>

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);

行动
A.
B
C

JS代码

<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>

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);

var viewModel=函数（）{
var self=这个；
self.defaultPageSize=4；
self.currentPage=ko.observearray（）；
self.pageSize=ko.observable（self.defaultPageSize）；
self.currentPageIndex=ko.可观察（0）；
self.comments=ko.observearray（）；
self.sorttype=“asc”；
self.currentPage=ko.computed（函数（）{
var pageSize=parseInt（self.pageSize（），self.defaultPageSize）；
var startIndex=pageSize*self.currentPageIndex（）；
var endIndex=startIndex+pageSize；
返回self.comments.slice（startIndex，endIndex）；
});
self.nextPage=函数（）{
如果（（（self.currentPageIndex（）+1）*self.pageSize（））0）{
self.currentPageIndex（self.currentPageIndex（）-1）；
}
否则{
self.currentPageIndex（（Math.ceil（self.comments（）.length/self.pageSize（））-1）
}
}
self.sortTable=函数（viewModel，e）{
var orderProp=$（e.target）.attr（“数据列”）
self.comments.sort（函数（左、右）{
leftVal=左[orderProp]；
rightVal=右[orderProp]；
如果（self.sortType==“asc”）{
返回leftValrightVal？1:-1；
}
});
self.sortType=（self.sortType==“asc”）？“desc”：“asc”；
}
self.markApprove=功能（注释）{
//1
警惕（comment.author）；
}
self.markDelete=函数（注释）{
//2
警惕（comment.author）；
}
self.show=函数（元素、ww、ee）{
//警报（$（元素））；
//警报（$（父级））；
$（元素）.show（）；
}
self.hide=函数（元素、ww、ee）{
//元素。隐藏；
$（元素）.hide（）；
}
}
var vm=new viewModel（）；
vm.comments([
{videoid:1000，标题：“项目1”，注释ID:10，注释：“干得好！”，作者：“Fred”，注释日期：@DateTime.Now.ToLongDateString（），状态：“}，
{videoid:2000，标题：“项目2”，注释ID:11，注释：“干得好！”，作者：“Bill”，注释日期：“@DateTime.Now.ToLongDateString（）”，状态：“}，
{videoid:3000，标题：“第3项”，注释ID:12，注释：“干得好”，作者：“Fred”，注释日期：@DateTime.Now.ToLongDateString（），状态：”，
{videoid:4000，标题：“第4项”，注释ID:13，注释：“奇妙”，作者：“比尔”，注释日期：“@DateTime.Now.ToLongDateString（）”，状态：“}，
{videoid:5000，标题：“项目5”，注释ID:14，注释：“精彩”，作者：“Fred”，注释日期：“@DateTime.Now.ToLongDateString（）”，状态：“}，
{videoid:6000，标题：“第6项”，注释ID:15，注释：“不错…”，作者：“比尔”，注释日期：“@DateTime.Now.ToLongDateString（）”，状态：“}，
{videoid:7000，标题：“第7项”，注释ID:16，注释：“很棒”，作者：“Fred”，注释日期：“@DateTime.Now.ToLongDateString（）”，状态：“}，
{videoid:8000，标题：“第8项”，注释ID:17，注释：“干得好”，作者：“比尔”，注释日期：“@DateTime.Now.ToLongDateString（）”，状态：”}
]);
ko.应用绑定（vm）；

---

这是我的JSFIDLE版本的最新版本，显示了我的最新进展。

您可以使用绑定上下文来指定所选单选按钮的唯一名称和值

一,。对于唯一名称 ：-使用“attr”数据绑定并命名属性，如：-

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

二,。用于获取所选单选按钮的值 ：-为网格中的每条记录创建另一个observable属性，该属性将存储选定单选按钮的值，并且在选中绑定中，您必须使用该observable属性

//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

//选定的可观察对象
{名称：“旅行频繁的小猫”，精选：ko.observable（），销售：352，价格：75.95，尺寸：[“a”、“c”、“b”]}
//html绑定
A.

---

在JSFIDLE示例中，数据是硬编码的json数据。在实际应用程序中，数据是通过ajax调用检索的<代码>$.getJSON（@Url.Content（“~/admin/comments/GetData”）”，函数（数据）{ko.applyBindings（新的PagedGridModel（数据））；}）如何向json添加可观察属性？或者您会将其添加到ObservalArray吗？@DavidRobinson您可以使用KO映射插件，也可以手动将observable添加到每个记录，然后再绑定到observable。感谢您的回复。您完美地回答了我的问题。我没有使用$parentContext。但这个答案重新唤起了我对如何解决我遇到的问题的记忆。