KnockoutJS 复选框列表未绑定所选值答案

【问题标题】：KnockoutJS checkboxlist not binding selected valuesKnockoutJS 复选框列表未绑定所选值
【发布时间】：2015-04-17 04:52:44
【问题描述】：

我有一个包含以下值的复选框列表：

"AllAuctionTypes": [
{
  "AuctionTypeID": "e42fde21-807c-4c81-938d-1918ca13f28b",
  "AuctionTypeName": "Truck & Trailer",
  "AuctionID": "00000000-0000-0000-0000-000000000000"
},
{
  "AuctionTypeID": "eb1cc1c2-d08d-45b6-8c46-1dbd9d54bd35",
  "AuctionTypeName": "Agriculture",
  "AuctionID": "00000000-0000-0000-0000-000000000000"
},
{
  "AuctionTypeID": "edb81092-0bfc-462e-a50e-4510feb54c55",
  "AuctionTypeName": "Plant & Machinery",
  "AuctionID": "00000000-0000-0000-0000-000000000000"
}
]

我想data-bind从我从服务器获取的数据中checked值。看起来像这样：

  {
  "AuctionID": "88848ed7-c2bd-4428-9c4c-c524f2717051",
  "AuctionName": "Another Auction",
  "AuctionDate": "2015-04-22",
  "AuctionTime": "16:50:00",
  "AuctionLocation": "LolVille",
  "AuctionContactPerson": "Bill",
  "AuctionContactNumber": "0115552222",
  "AuctionEMail": "bill@auctionman.co.za",
  "AuctionWebsite": "http://somesite.co.za",
  "AuctionType": [
    {
      "AuctionTypeID": "e42fde21-807c-4c81-938d-1918ca13f28b",
      "AuctionTypeName": "Truck & Trailer",
      "AuctionID": "00000000-0000-0000-0000-000000000000"
    },
    {
      "AuctionTypeID": "edb81092-0bfc-462e-a50e-4510feb54c55",
      "AuctionTypeName": "Plant & Machinery",
      "AuctionID": "00000000-0000-0000-0000-000000000000"
    }
  ]
}

AuctionType 值是应标记为选中的项目，但它似乎没有进行绑定。这是我的带有绑定的 HTML：

<div class="form-group">
                                <label>Auction Catagory</label>
                                <div>
                                    <table data-bind="foreach: AllAuctionTypes">
                                        <tr>
                                            @*Debugging*@
                                            <td data-bind="text: ko.toJSON($parent.Auction.AuctionType)"></td>
                                            <td>

                                                @*this is the segment I am trying to bind*@
                                                <input type="checkbox" data-bind="checkedValue: $data, checked: $parent.Auction.AuctionType" />  <span data-bind="text: AuctionTypeName"></span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

但它似乎没有根据所选内容绑定值，或者我只是错误地绑定它。

这是显示调试段和未选中框的屏幕截图

任何帮助将不胜感激！

【问题讨论】：

您是否尝试将布尔值绑定到checked 绑定？我在淘汰文档中看到checked 绑定在应用于复选框并绑定到非布尔值时表现松散。
@CameronTinker 还没有。但也不确定我将如何去做
我很困惑。何时应选中/取消选中该框？数据何时存在/未定义？
@JacquesBronkhorst 是否取消选中用于删除数据的复选框？
@Tyrsius 成功了，感谢您的建议；）

标签： javascript jquery knockout.js

【解决方案1】：

我按照Tyrsius 的建议使用自定义 Checked 绑定。

复选框绑定如下所示：

 <input type="checkbox" data-bind="checked: $root.IsChecked(AuctionTypeID), checkedValue: $data" /> <span data-bind="text: AuctionTypeName"></span>

我为 IsChecked 函数提供了 AuctionTypeID，它运行比较以查看哪个 ID 已被检查。

这是非常适合我的 IsChecked 函数：

 self.IsChecked = function (ListID) {
        var K;
        var match = ko.utils.arrayFirst(self.Auction.AuctionType(), function (item) {
            return ListID === item.AuctionTypeID
        });

        if (!match) {
            K = false;
        } else {
            K = true;
        }
        return K;
    }

【讨论】：

【解决方案2】：

处理一些奇怪的范围，但这是可行的：

HTML：

<div class="form-group">
                                <label>Auction Category</label>
                                <div>
                                    <table data-bind="foreach: allAuctionTypes">
                                        <tr>
                                            <td>
                                                <input type="checkbox" data-bind="checkedValue: AuctionTypeID, checked: $root.auctionTypeSelected($data)" />  <span data-bind="text: AuctionTypeName"></span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

JS：

var auction = {
  "AuctionID": "88848ed7-c2bd-4428-9c4c-c524f2717051",
  "AuctionName": "Another Auction",
  "AuctionDate": "2015-04-22",
  "AuctionTime": "16:50:00",
  "AuctionLocation": "LolVille",
  "AuctionContactPerson": "Bill",
  "AuctionContactNumber": "0115552222",
  "AuctionEMail": "bill@auctionman.co.za",
  "AuctionWebsite": "http://somesite.co.za",
  "AuctionType": [
    {
      "AuctionTypeID": "e42fde21-807c-4c81-938d-1918ca13f28b",
      "AuctionTypeName": "Truck & Trailer",
      "AuctionID": "00000000-0000-0000-0000-000000000000"
    },
    {
      "AuctionTypeID": "edb81092-0bfc-462e-a50e-4510feb54c55",
      "AuctionTypeName": "Plant & Machinery",
      "AuctionID": "00000000-0000-0000-0000-000000000000"
    }
  ]
};
var allAuctionTypes = [
{
  "AuctionTypeID": "e42fde21-807c-4c81-938d-1918ca13f28b",
  "AuctionTypeName": "Truck & Trailer",
  "AuctionID": "00000000-0000-0000-0000-000000000000"
},
{
  "AuctionTypeID": "eb1cc1c2-d08d-45b6-8c46-1dbd9d54bd35",
  "AuctionTypeName": "Agriculture",
  "AuctionID": "00000000-0000-0000-0000-000000000000"
},
{
  "AuctionTypeID": "edb81092-0bfc-462e-a50e-4510feb54c55",
  "AuctionTypeName": "Plant & Machinery",
  "AuctionID": "00000000-0000-0000-0000-000000000000"
}
];

var vm = function(auctionTypes, auction){
    var self = this;
    self.allAuctionTypes = ko.observableArray(auctionTypes);
    self.auction = ko.observable(auction);
    self.auctionTypeSelected = function(auctionType) {
        var selected = false;
        $.each(self.auction().AuctionType, function(i, aType){
            if (auctionType.AuctionTypeID === aType.AuctionTypeID) {
                selected = true;
                return; // break from for loop
            }
        });
        return selected;
    };
};

ko.applyBindings(new vm(allAuctionTypes, auction));

小提琴： http://jsfiddle.net/brettwgreen/ccjjc44d/

【讨论】：