0

私は最初のノックアウト プロジェクトに取り組んでおり、ページに動的に追加されたチェックボックスをチェックできないことがわかりました。ノックアウト Web サイトのデモ コードを試してみましたが、それ自体は正常に動作しますが、実装はうまくいきません。結果は「チェック済み」に拘束されず、アラートも発生しません。ボックスをクリックしてもボックスの状態は変わらず、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"/>

日付 接頭辞 名 姓 国 生年月日 電話 E メール グローバル コンプリート 

$(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正しい関数を呼び出すために使用します。

第 3 に、そのプロパティが項目にある場合、alert関数はselfそのプロパティを探しています。isActioned次のように、関数でパラメーターを使用して、呼び出しコンテキストをキャプチャします。

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

4 番目に、 に注意してreturn trueください。それがなければ、clickイベントはクリックを食い物にし、発生させたくないチェックボックスのチェックを外さないようにします。true を返すと、Knockout はイベントをバブルさせます。

最後に、何も呼び出しself.load()ていないため、ajax は起動しません。これが作業用の fiddleで、少し削られています。

于 2013-03-28T23:25:18.330 に答える