У меня есть данные, которые я возвращаю как JSON, а именно:

 {
"Text": "This is 1",
"Number": "1."
},
{
"Text": "This is 2 ",
"Number": "2."
 },
{
"Text": "This is 3 ",
"Number": "3."
},
{
"Text": "test indent",
"Number": "a."
 },
{
"Text": "test indent 2",
"Number": "b."
},
{
"Text": "insrt 1",
"Number": "i."
},
{
"Text": "back to indent ",
"Number": "c."
},
{
"Text": "This is 4 ",
"Number": "4."
}

Я показываю это в HTML с нокаутом следующим образом:

<div data-bind="foreach: numberedList, visible: numberedList().length > 0">
<span data-bind="text: number"></span>
<span data-bind="html: text"></span><br />
</div>

Какую функцию / код мне нужно добавить, чтобы данные были с отступом в соответствии с цифрами / буквами? Я хочу, чтобы HTML-страница выглядела следующим образом: введите описание изображения здесь

Спасибо

0
shw 5 Сен 2016 в 19:02

3 ответа

Лучший ответ

Чтобы реализовать то, что вы хотите, вам необходимо изменить структуру ваших данных. Нет никакой связи между вашими текущими данными, и реализация такой вещи с этими данными была бы беспорядочной.

Вот пример того, как могут выглядеть ваши данные: https://jsfiddle.net/kyr6w2x3/76/

HTML:

<div data-bind="foreach:Items">
  <span data-bind="text:Number"></span><span data-bind="text:Text"></span>
  <div data-bind="foreach:Children">
     <div class="sub-1">
         <span data-bind="text:Number"></span><span data-bind="text:Text"></span>
     </div>
     <div data-bind="foreach:Children">
        <div class="sub-2">
           <span data-bind="text:Number"></span><span data-bind="text:Text"></span>
        </div>
     </div>
   </div>
</div> 

JS:

data =  [
   {
      "Text":"This is 1",
      "Number":"1.",
      "Children":[]
   },
   {
      "Text":"This is 2",
      "Number":"2.",
      "Children":[]
   },
   {
      "Text":"This is 3",
      "Number":"3.",
      "Children":[
         {
            "Text":"test indent",
            "Number":"a.",
            "Children":[]
         },
         {
            "Text":"test indent 2",
            "Number":"b.",
            "Children":[
               {
                  "Text":"insert i",
                  "Number":"i.",
                  "Children":[]
               }
            ]
         },
         {
            "Text":"back to indent",
            "Number":"c.",
            "Children":[

            ]
         },

      ]
   }
]
function AppViewModel() {
    var self = this;
    self.Items = ko.observableArray(data);
}
var VM = new AppViewModel()
ko.applyBindings(VM);
1
Matin Kajabadi 5 Сен 2016 в 23:23

Я бы сделал переменную, чтобы вставить в нее этот json.

var data = []; data.push({"Text": "This is 1","Number": "1."}); а затем я бы сделал функцию, чтобы вернуть его на экран. вы также должны продемонстрировать некоторую работу, попробовать ее и показать, какую функцию вы пытаетесь выполнить, MDN - хорошее место для поиска информации.

-1
I can do it 5 Сен 2016 в 16:28

Вот как это сделать в CSS, используя имена классов. Если вы хотите, чтобы вложение определяло тип, вы можете заменить имена классов на селекторы типов ol > ol.

ol.alpha {
  counter-reset: alphalist;
}

ol.alpha > li {
  list-style: none;
}

ol.alpha > li::before {
  content: counter(alphalist, lower-alpha)". ";
  counter-increment: alphalist;
}


ol.roman {
  counter-reset: romanlist;
}

ol.roman > li {
  list-style: none;
}

ol.roman > li::before {
  content: counter(romanlist, lower-roman)". ";
  counter-increment: romanlist;
}
<ol>
  <li>Item 1</li>
  <li>
    Item 2
    <ol class="alpha">
      <li>Item A</li>
      <li>
        Item B
        <ol class="roman">
          <li>Item I</li>
          <li>Item II</li>
        </ol>
      </li>

      <li>Item C</li>
    </ol>
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>
0
user3297291 6 Сен 2016 в 08:20