Question

我最近一直在玩一个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);
    };

我不确定如何绑定和填充相关组件？

Answer 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/

如何重用淘汰组件

行动项目

1 个答案: