javascript - Jquery 数据绑定(bind)到无序列表

Question

目前我正在像这样将数据添加到我的无序列表中:

<ul id="mychats"></ul>

if (obj.request_type == 'client_information') {
    $("#mychats").children().remove();

    $.each(obj.clients_information, function (index, data) {
        var li = "<li class='not_selected' id='" + data.chatid + "'>" + data.client_name;

        if (data.status == 0) //Chat is unlocked
            li += " <img class='chat_status' src='https://www.astro.ru.nl/lopes/_media/intra.png?w=&h=&cache=cache' />";
        else
            li += " <img class='chat_status' src='https://confluence.atlassian.com/download/attachments/686859081/page-restrictions-padlock-icon.png?api=v2' />";

        li += "</li>";
        $("#mychats").append(li);
    });
}

这按预期工作，但我想以不同的方式进行，我想直接将 ul 与 obj.clients.informations 中的数据绑定(bind)。

obj 中的示例 JSON 数据:

{
    "request_type": "client_information",
    "clients_information": [{
        "chatid": "0a9ef3c4-b34a-435f-b0c5-15bf415e1517",
        "client_name": "awd",
        "status": 0
    },{
        "chatid": "08a725c4-4fd1-471d-a507-4782f6bbc774",
        "client_name": "awdaeqdaw",
        "status": 0
    }]
}

类似于:

<ul id='mychats' data-bind='foreach: Clients' data-role='listview'>
    <li data-binding='class: thisclass, id: chatid, text: client_name'></li>
</li>

在 jQuery 中使用指定代码能够将其绑定(bind)到无序列表。我试着在网上搜索，但我真的找不到 jQuery 的例子。

就是这个:http://jsfiddle.net/rniemeyer/4FdcY/ (我想要这样的东西作为我的对象)

谢谢大家。

Answer 1

该示例使用了 knockoutjs 库。网站上的文档非常准确，正是您想要的。

只需将您的 json 解析为一个对象，然后使用 knockout 将该对象绑定(bind)到标记。