Написание элементов списка из JSON с помощью Knockout

Я использую Knockout.js как способ динамически обновлять представление из ответа JSON. JSON выглядит следующим образом:

var data = {
  "Properties": {
    "Engine Capacity": "1499cc",
    "Doors": 3,
    "Extras": [
      "LED lights",
      "4WD"
    ],
    "Model": "123a"
  }
};

Я нашел способ в JavaScript создать элементы <li>:

for (var field in data['Properties']) {
  var value = data['Properties'][field];
  var out = '<li>' + field + ': ' + value + '</li>';
  console.info(out);
  // <li>Engine Capacity: 1499cc</li>
  // <li>Doors: 3</li>
}

Я знаю, что это не идеальный способ, поскольку создание HTML в JavaScript - не лучшая практика. Есть способ распечатать значение в Knockout, но с жестко запрограммированными значениями:

<ul data-bind = "foreach:$root.Properties">
  <li data-bind = "text:$data:Doors"></li>
  <li data-bind = "text:$data.Model"></li>

Но мне было интересно, можно ли сделать так, чтобы Knockout.js выглядел так, как я возвращаю в коде JavaScript?

Вам нужно сделать какое-то отображение. Может ko.mapping.fromJSON?

Adelin 18.07.2018 10:26
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
34
1

Ответы 1

Вот как это сделать:

var data = {
  "Properties": {
    "Engine Capacity": "1499cc",
    "Doors": 3,
    "Extras": [
      "LED lights",
      "4WD"
    ],
    "Model": "123a"
  }
};


var viewModel = {
    data: ko.mapping.fromJS({"Properties": data.Properties})
};

ko.applyBindings(viewModel);​

<ul data-bind = "foreach: data.Properties">
    <li>
        <b data-bind = "foreachprop: props"> : 
            <span data-bind = "value"> </span>
        </b>
    </li>
</ul>

Дополнительная ссылка:

Другие вопросы по теме