フォーマットの番号JSONリスト

Question

次のように私はJSONとして返してるのデータを持っている：

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

何の関数を次のように私はノックアウトとHTMLでそれを表示しています

{ 
"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ページを見てみたい：

はあなたが

Answer 1

あなたがしたいことを実装するためには、データの構造を変更する必要があります。あなたの現在のデータとこのデータを実装することとの間には関係がありません。そのデータは面倒です。ここで

は、あなたのデータがあるかもしれない方法の例です：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); 

Answer 2

私はそれにそのJSONをプッシュする変数になるだろうありがとうございました。

var data = []; data.push({"Text": "This is 1","Number": "1."}); を入力して、画面に戻す機能を作成します。 MDNは、何らかの仕事をしてみて、それを試してみて、どのような機能を作っているのかを示す必要があります。

Answer 3

はここでクラスを使用して、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>