如何重用淘汰组件

Question

我最近一直在研究一个 yeoman knockout 模板，我一直在尝试制作一个简单的电子邮件网站。我已通过 json 请求成功检索到我的电子邮件。但我现在想做的是在显示基本电子邮件信息的 table 行下的手风琴下拉菜单中显示电子邮件的内容。我有一个用于我的电子邮件的淘汰组件，我还为我的电子邮件详细信息构建了另一个组件。我不想在单击按钮之前加载电子邮件详细信息组件，然后在它展开时填充电子邮件详细信息模板。

到目前为止，我已经到了扩展手风琴的地步，但我对如何填充电子邮件详细信息组件有点不知所措。我会通过 ajax 从 msg_id 值调用 return 电子邮件详细信息 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 仅操纵 model/viewmodel。它不应该做任何 DOM 的事情或以其他方式与 view/page..

交互

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

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

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

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

如何重用淘汰组件

How to reuse a knockout component

knockout.js

knockout-components

操作项