Question

我正在使用knockout observable数组来绑定html表，就像这样

<div>
<button data-bind='click: update'>Get Data</button>
</div>
<div id="divLanguage" style="overflow: hidden;">
<table style="width: 760px;">
    <tr>
        <td style="padding: 0px;width: 100px;font-weight: bold">name</td>
        <td style="padding: 0px;width: 70px;font-weight: bold">select</td>
    </tr>
</table>
<div id="language" style="overflow: auto;height: 540px;">
    <table id="Table1" class="gridHover" style="width: 760px;">
        <tbody data-bind="foreach: queryResult">
            <tr>
                <td style="padding: 0px;text-align: left;width: 100px" data-bind="text: name"></td>
                <td style="padding: 0px;text-align: left;width: 70px">
                    <input type="checkbox" />
                </td>

            </tr>
        </tbody>
    </table>
</div>

视图模型是

var initialData = [{
id: 1,
name: "Well-Travelled Kitten",
sales: 352,
price: 75.95,
whatever: 10
  }, {
id: 2,
name: "Speedy Coyote",
sales: 89,
price: 190.00,
whatever: 100
 }, ];

 function viewModel() {
var self = this;
self.queryResult = ko.observableArray();
this.update = function (data) {
    //this is an ajax call and return dateset back
    $.each(initialData, function (index, item) {
        self.queryResult.push(item);
    });

};

}

 ko.applyBindings(new viewModel());

您可以看到该复选框未绑定到任何字段。我知道我们可以使用检查绑定将数据绑定到复选框。问题是我不能将复选框绑定到任何列，因为我将获取飞行信息。在可观察数组中，我有一个名为id的属性，如果该id的值为true或false，我将获取信息。取决于我想要绑定复选框。

我真的不知道如何继续这个。有没有人知道绑定复选框没有任何列。一旦我们绑定了，当我们检查或取消选中它时，我们如何从复选框中获取价值？

以下是Fiddle

Answer 1

我首先要创建一个客户端模型，然后将相关数据映射到它。这样，您可以拥有仅与客户端相关的属性。

<强>的Javascript

var MyModel = function (data) {
    var self = this;
    self.id = ko.observable(data.id || '');
    self.name = ko.observable(data.name || '');
    self.price = ko.observable(data.price || 0.0);
    self.sales = ko.observable(data.sales || 0);
    self.whatever = ko.observable(data.whatever || '');
    self.selected = ko.observable(false);
    return self;
};

function viewModel() {
    var self = this;
    self.queryResult = ko.observableArray();
    self.update = function (data) {
        //this is an ajax call and return dateset back
        $.each(initialData, function (index, item) {
            self.queryResult.push(new MyModel(item));
        });
    };

    self.selectedItems = ko.computed({
        read: function () {
            return ko.utils.arrayFilter(self.queryResult(), function (item) {
                return item.selected() === true;
            });
        },
        deferEvaluation: false
    });
}

<强> HTML

<div>
    <button data-bind='click: update'>Get Data</button>
</div>
<div id="divLanguage" style="overflow: hidden;">
    <table style="width: 760px;">
        <tr>
            <td style="padding: 0px;width: 100px;font-weight: bold">name</td>
            <td style="padding: 0px;width: 70px;font-weight: bold">select</td>
        </tr>
    </table>
    <div id="language" style="overflow: auto;height: 540px;">
        <table id="Table1" class="gridHover" style="width: 760px;">
            <tbody data-bind="foreach: queryResult">
                <tr>
                    <td style="padding: 0px;text-align: left;width: 100px" data-bind="text: name"></td>
                    <td style="padding: 0px;text-align: left;width: 70px">
                        <input type="checkbox" data-bind="checked: selected" />
                    </td>
                </tr>
            </tbody>
        </table>
        <fieldset>
            <legend>Selected Items</legend>
            <ul data-bind="foreach: selectedItems">
                <li data-bind="text: name"></li>
            </ul>
        </fieldset>
    </div>
</div>

所以你最终得到这样的东西的 JSFiddle Demo

在网格中绑定没有值的复选框

1 个答案: