0

我最近一直在玩一个 yeoman 淘汰赛模板，我一直在尝试制作一个简单的电子邮件网站。我设法通过 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>

每条消息都应该是一个具有所有属性（主题、sender_addr 等）的类、一个 msgVisible 可观察布尔值和一个用于执行此操作的 toggleDetail 方法：

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

这是一个小提琴示例：http: //jsfiddle.net/brettwgreen/92qnvnaw/

于 2015-04-14T18:55:50.653 回答