0

我正在处理我的第一个淘汰项目，我发现当它们被动态添加到页面时我无法选中复选框。我已经尝试过来自淘汰网站的演示代码，它本身可以正常工作，但我的实现没有。结果对“已检查”没有约束力，我的警报也没有触发。当我单击它们并且没有javascript错误时，框的状态不会改变..

<div class="report">
<label>start date</label>
<input type="text" id="date-from" data-bind="value: startDate" />
<span>to </span>
<input type="text" id="date-to" data-bind="value: endDate" />
<label>product code</label>
<input type="text" id="product-code" data-bind="value: productCode" />
<label>lead type</label>
<select id="lead-type" data-bind="value: leadType">
    <option value="0" selected="selected">all</option>
    <option value="B">sales</option>
    <option value="Q">enquiries</option>
    <option value="F">failed purchases</option>
    <option value="C">cancelled purchases</option>
</select>
<input type="submit" id="submit-query" class="button" data-bind="click: load" value="Go"/>

日期前缀 名字 姓氏 国家 出生日期 电话 电子邮件 全球 完整 

$(document).ready(function () {
    var reportsViewModel = function() {
        var self = this;
        self.startDate = ko.observable();
        self.endDate = ko.observable();
        self.productCode = ko.observable();
        self.leadType = ko.observable();
        self.wantsSpam = ko.observable(true);
        self.alert = function () {
            alert(self.isActioned());
        };

        var queryData = {
            startDate: self.startDate,
            endDate: self.endDate,
            productCode: self.productCode,
            isActioned: false,
            leadType: self.leadType
        };

        function orderModel(item) {
            this.OrderDate = ko.observable(item.OrderDate),
            this.Prefix = ko.observable(item.Prefix),
            this.FirstName = ko.observable(item.FirstName),
            this.LastName = ko.observable(item.LastName),
            this.Country = ko.observable(item.Country),
            this.DateofBirth = ko.observable(item.DateofBirth),
            this.Telephone = ko.observable(item.Telephone),
            this.CustEmail = ko.observable(item.CustEmail),
            this.gbac = ko.observable(item.gbac),
            this.isActioned = ko.observable(true)
        };

        self.reportItems = ko.observableArray([]);

        self.load = function () {
            $.ajax({
                url: sf.getServiceRoot('CC_Reporting') + "Report/getLeads",
                type: "POST",
                data: queryData,
                beforeSend: sf.setModuleHeader
            }).done(function (data, status) {
                if (data == "There are no records which match your search.") {
                    alert(data);
                    return;
                } else {
                    self.reportItems.removeAll();
                    $.each(data, function (i, item) {
                        console.log(item);
                        self.reportItems.push(new orderModel(item));
                    });
                }
            }).fail(function (data) {
                alert(data);

            });
        }


    };

    ko.applyBindings(new reportsViewModel());

});

4

1 回答 1

0

您的代码中有几个错误。

id首先，正如我所提到的，在循环中的 DOM 节点上具有属性是非法的。

其次，您的click绑定在绑定内部foreach，因此它的上下文是orderModel，但函数在父级上。用于click: $parent.alert调用正确的函数。

第三，当该属性在项目上时，您的alert功能正在寻找self该属性。isActioned在函数上使用参数来捕获调用上下文，如下所示：

self.alert = function (item) {
        alert(item.isActioned());
        return true;
    };

第四，注意return true. 没有它，click事件会吃掉点击，阻止它取消选中您不希望发生的复选框。返回 true 会导致 Knockout 让事件冒泡。

最后，没有任何东西在调用self.load()，所以你的 ajax 永远不会触发。这是工作小提琴，减少了一点。

于 2013-03-28T23:25:18.330 回答