Question

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

"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"
}
]

我希望从我的服务器获取的数据数据绑定 已检查值。看起来像这样：

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

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

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

任何帮助将不胜感激！

Answer 1

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

Checkbox绑定如下所示：

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

我使用AuctionTypeID提供IsChecked功能，并运行比较以查看已检查的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;
    }

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

KnockoutJS checkboxlist不绑定选定的值

2 个答案: