4

データの各行にselectallトグルチェックボックスとチェックボックスがあります。

現在、サーバーから返されるデータにはisSelectedObservableがありません。各行に監視可能な「isSelected」を追加しました。ただし、isSelectedobservableは各行のチェックボックスにバインドされません。

これがビューモデルです：

var folderViewModel = function () {
    var self = this;
    self.Folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.SelectedFolder = ko.observable();
    self.Mails = ko.observableArray([]);
    self.SelectedMail = ko.observable();
    self.SelectAll = ko.observable(false);

    self.navigate = function (folder) {
        self.SelectedFolder(folder);
        //$.get('/Api/MailBox', { folder: folder }, self.Mails);

        $.ajax({
            url: "/Api/Mailbox",
            data: { folder: folder },
            success: function (data) {
                ko.mapping.fromJS(data, {}, self.Mails);
                ko.utils.arrayForEach(self.Mails(), function (mail) {
                    mail.isSelected = ko.observable(true);
                    mail.isSelected.subscribe(function (myvalue) {
                        console.log(myvalue);
                    });
                });
                console.log(ko.toJSON(self.Mails()));
            },
            statusCode: {
                404: function () {
                    alert("No Mail");
                }
            }
        });

        //ko.mapping.fromJS(data, {}, self.Mails);
        //console.log(ko.toJSON(self.Mails));
    };

    self.SelectAll.subscribe(function (newValue) {
        ko.utils.arrayForEach(self.Mails(), function (mail) {
            console.log(mail.isSelected());
            mail.isSelected(newValue);

        });
        console.log(newValue);
    }, self);

    this.navigate("Inbox");
};
ko.applyBindings(new folderViewModel());

そして、これがバインディングです。

<table class="table table-bordered table-striped table-condensed table-hover">
<thead>
    <tr>
        <th>
            <input type="checkbox" data-bind="checked: SelectAll"/>
            @*<input type="checkbox" />*@
        </th>
        <th>
            From
        </th>
        <th>
            To
        </th>
        <th>
            Subject
        </th>
        <th>
            Date
        </th>
    </tr>
</thead>
<tbody data-bind="foreach:Mails">
    <tr data-bind="click:$root.navigateToMail">
        <td style="width: 15px">
            <input type="checkbox" data-bind="checked: $root.isSelected">
            @*<input type="checkbox">*@
        </td>
        <td data-bind="text: From">
        </td>
        <td data-bind="text: To">
        </td>
        <td data-bind="text: Subject">
        </td>
        <td data-bind="text: MailDate">
        </td>
    </tr>
</tbody>

チェックボックス <input type="checkbox" data-bind="checked: $root.isSelected">がのajaxデータにバインドされていませんmails.isSelected=ko.obsevable(true)。何が問題なのか？

4

2 に答える 2

4

まず、learn.knockoutjs.comの例を使用するためのkuddos、すばらしいリソース。

エラーは、KnockoutJSの一般的な落とし穴です。モデルにバインドされているオブザーバブルを更新せずに、モデルを変更しています。次の行を参照してください-

ko.mapping.fromJS(data, {}, self.Mails);
ko.utils.arrayForEach(self.Mails(), function (mail) { ... });

表示されている場合は、最初にメールのモデルを作成してから、追加の監視可能オブジェクトを追加しています。このオブザーバブルはどのコンテキストにアタッチする必要がありますか？mail.isSelected各メールの値を更新しないと、メールオブジェクトにあなたが追加されることはありません。

これを解決するには2つの方法があります。1つ目は、forEach配列のメールモデルを更新します。

ko.utils.arrayForEach(self.Mails(), function (mail, index) { 
    // Add up the isSelected observable
    self.Mails()[index] = mail; 
});

これには、ここで読むことができる監視可能な配列に関するパフォーマンスの落とし穴があります。Mails()基本的には、一時配列を作成し、毎回呼び出すよりも監視可能な配列全体を更新する必要があります。

もう1つの方法は非常に簡単です。メールモデルを作成する方法の順序を入れ替えます。

ko.utils.arrayForEach(self.Mails(), function (mail) { ... });
ko.mapping.fromJS(data, {}, self.Mails);

最初に、オブザーバブルをデータオブジェクトにアタッチし、次にビューモデルに「ねえ！保存するための新しいモデルを取得しました。これには、dataプラスのオブザーバブルisSelectedからこのプロパティがあります。追加しました。バインドしてください。」

そうは言っても、HTMLのプロパティはそうではchecked: isSelectedありませんchecked: $root.isSelected。これが、isSelectedがメールモデルではなくViewModelにバインドされていたため、SelectAll（一種）で機能していた理由です。この便利なステートメントを使用して、デバッグを理解することができます。

// In any row inside your data
<td data-bind="text: ko.toJSON($data)">DEBUG DATA</td>

それはそれであるはずです、あなたはここであなたのコードが働いているのとそのすべての解決策を見ることができます：http: //jsfiddle.net/jjperezaguinaga/VTuHA/。/echo/json/（ JsFiddleの機能を使用して）再生するサンプルデータをいくつか追加し、いくつかのものと、最後に配置したコードでデバッグするために使用した余分な列を削除しました。この最後の列isSelectedでは、チェックボックスをクリックするたびに値が更新されていることを確認できます。

于 2012-12-30T17:34:33.247 に答える
0

ビューモデルではなく、各アイテムにisSelected追加されていませんか？もしそうなら、あなたのバインディングは次のようになります。mailroot

<input type="checkbox" data-bind="checked: isSelected">

注：ビューモデルでnavigateToMail使用できるメソッドも表示されません。これも問題の原因になります。root

于 2012-12-30T16:43:05.393 に答える