2015-07-06 2 views
0

В настоящее время я добавляю данные в мой неупорядоченный список, как это:Jquery данные связываются с неупорядоченным списком

<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 напрямую.

Пример JSON данные в obj:

{ 
    "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, чтобы иметь возможность привязать его к неупорядоченного списка. Я пытался искать по сети, и я не мог найти пример для jQuery.

Просто это: http://jsfiddle.net/rniemeyer/4FdcY/ (я хочу что-то подобное для моего объекта)

Спасибо всем.

ответ

1

В этом примере используется библиотека knockoutjs. Документация на веб-сайте - это то, что вам нужно.

Просто проанализируйте свой json внутри объекта и используйте нокаут, чтобы привязать объект к разметке.

+0

Могу ли я сделать это внутри функции jquery? – EchO

+0

Я использую только JQuery для $ (document) .ready (....), где я создам экземпляр модели представления, вызовите метод в модели представления, чтобы получить данные, поместите его в наблюдаемый массив, который связанный с пользовательским интерфейсом, затем вызовите ko.applyBindings (viewModel). Тогда все ваши данные появятся в пользовательском интерфейсе, как магия. – markusrambarkus

Смежные вопросы