0

私は最近、ヨーマン ノックアウト テンプレートをいじっており、シンプルなメール サイトを作ろうとしています。jsonリクエストを介してメールを取得できました。しかし、ここでやりたいことは、基本的な電子メール情報を示すテーブル行の下のアコーディオン ドロップダウンに電子メールの内容を表示することです。メール用のノックアウト コンポーネントがあり、メールの詳細用に別のコンポーネントを作成しました。ボタンがクリックされるまで電子メール詳細コンポーネントをロードし、展開時に電子メール詳細テンプレートを入力したくありません。

これまでのところ、アコーディオンを展開するところまで来ましたが、電子メールの詳細コンポーネントを設定する方法に少し困っています。これを ajax 呼び出しで行い、msg_id 値から電子メールの詳細 JSON を返します。

どんな助けでも素晴らしいでしょう。

私のメールページは次のようになります

アクションアイテム

<table class="table table-condensed" style="border-collapse:collapse;">
    <thead>
        <tr data-bind="foreach: Headers">
            <th>
                <b>
                    <a href="#" data-bind="click: $parent.sort, text: title"></a>
                </b>
            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Messages">
        <tr>
            <td>
                <button class="btn btn-success btn-6 btn-6g" data-bind="text: msg_id, click: toggleDetail"></button>
            </td>
            <td data-bind="text: subject"></td>
            <td data-bind="text: sender_addr"></td>
            <td data-bind="date: created"></td>
            <td></td>
        </tr>
        <tr class="Details Hidden">
            <td colspan="5">
                <div>
                    <!--click tot populate this component below-->

                 <emaildetail data-bind="attr: { id: msg_id}"></emaildetail> 
                </div>
            </td>
        </tr>
    </tbody>
</table>

ボタンイベントのコードビハインド

  this.toggleDetail = function (data, e) {
        var clickedButton = $(e.target);
        var parentRow = clickedButton.parents("tr");
        var res = parentRow.next().toggleClass("Hidden");

        // This is what I want to pass to my email detail component

        var id = data.msg_id;
        // component.emaildetail.refresh(id);
    };

関連するコンポーネントをバインドして埋める方法がよくわかりません。

4

1 に答える 1

1

別の方法で考え始める必要があります... ノックアウトでは、JavaScript はモデル/ビューモデルのみを操作します。DOM を実行したり、ビュー/ページと対話したりしないでください。

<table class="table table-condensed" style="border-collapse:collapse;">
    <thead>
        <tr data-bind="foreach: Headers">
            <th>
                <b>
                    <a href="#" data-bind="click: $parent.sort, text: title"></a>
                </b>
            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Messages">
        <tr>
            <td>
                <button class="btn btn-success btn-6 btn-6g" data-bind="text: msg_id, click: toggleDetail"></button>
            </td>
            <td data-bind="text: subject"></td>
            <td data-bind="text: sender_addr"></td>
            <td data-bind="date: created"></td>
            <td></td>
        </tr>
        <tr class="Details Hidden" data-bind="visible: msgVisible">
            <td colspan="5">
                <div>
                    <!--click tot populate this component below-->

                 <emaildetail data-bind="attr: { id: msg_id}"></emaildetail> 
                </div>
            </td>
        </tr>
    </tbody>
</table>

各メッセージは、すべてのプロパティ (subject、sender_addr など)、msgVisible 監視可能なブール値、およびこれを行うだけの toggleDetail メソッドを持つクラスである必要があります。

this.toggleDetail = function () {
    this.msgVisible(!this.msgVisible);
    };

フィドルの例を次に示します: http://jsfiddle.net/brettwgreen/92qnvnaw/

于 2015-04-14T18:55:50.653 に答える