javascript - 嵌套 html 元素的 knockout 绑定(bind)

Question

当使用如下嵌套的 html 元素时，我在 knockout 绑定(bind)方面遇到了一些问题

<ul class="result-list" data-bind="foreach: newsData">
    <li>
        <a class="big-link" data-bind="text: Title, attr: { href: Url }"></a>
        <div data-bind="html: Content"></div>
        <div class="meta" data-bind="text: PublishDate">
            <span class="time" data-bind="text: PublishTime"></span>
            <span class="changed" data-bind="text: ChangedDate, visible: IsChanged">
                <span class="time" data-bind="text: ChangedTime"></span>
            </span>
        </div>
    </li>
</ul>

json

var sample = [{
    "Id": 80055,
    "Title": "Not changed!",
    "Content": "<p>Curabitur eget euismod mi. Cras mollis augue a massa porttitor posuere. Quisque tempus justo vel orci venenatis lobortis.</p>",
    "Url": "/asd/Not-changed/",
    "PublishDate": "28. mars 2014",
    "PublishTime": "Kl 01:30",
    "IsChanged": false,
    "ChangedDate": "28. mars 2014",
    "ChangedTime": "Kl 01:30"
}, {
    "Id": 80046,
    "Title": "Ny artikkel",
    "Content": "<p>This is content</p>\n<p>Demo</p>",
    "Url": "/asd/Ny-artikkel/",
    "PublishDate": "4. mars 2014",
    "PublishTime": "Kl 12:00",
    "IsChanged": true,
    "ChangedDate": "24. mars 2014",
    "ChangedTime": "Kl 04:47"
}];

它很好地绑定(bind)到 PublishDate 但这似乎覆盖了所有子元素。有什么解决办法的建议吗？

Answer 1

从 Knockout docs 读取对于文本绑定(bind):

Knockout sets the element’s content to a text node with your parameter value. Any previous content will be overwritten

您可能需要编写子元素来容纳这些数据绑定(bind):

<ul class="result-list" data-bind="foreach: newsData">
    <li>
        <a class="big-link" data-bind="text: Title, attr: { href: Url }"></a>
        <div data-bind="html: Content"></div>
        <div class="meta">
            <span data-bind="text: PublishDate"></span>
            <span class="time" data-bind="text: PublishTime"></span>
            <span class="changed">
                <span data-bind="text: ChangedDate, visible: IsChanged"></span>
                <span class="time" data-bind="text: ChangedTime"></span>
            </span>
        </div>
    </li>
</ul>