如何重用淘汰组件

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

你必须开始以不同的方式思考。。。在knocket中，您的javascript仅操纵模型/viewmodel。它不应该做任何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/