1

テンプレートエンジンとしてブレードを使用するウェブサイトの i18nにi18nextを使用するこの JSON があります。

"guide": {
    "sections": {
        "the-basics": {
            "title": "The Basics",
            "contents": [
                {
                    "title": "Introduction",
                    "content": {"p1": "", "p2": "", "p3": ""}
                },
                {
                    "title": "A Chapter in the Zeitgeist Movement",
                    "content": {"p1": "", "p2": "", "p3": ""}
                }
            ]
        },
        "setting-up-a-national-chapter": {
            "title": "Setting up a National Chapter",
            "contents": [
                {
                    "title": "Gathering Volunteers & Social Media",
                    "content": {"p1": "", "p2": "", "p3": ""}
                }
            ]
        }
    }
}

私の JavaScript では、インデックス番号に応じて、コンテンツ リストにアクセスしようとしています。

これは私がこれまでに持っているものです:

  // Load page
  $('a.nav-link').on('click', function( event ) {
      event.preventDefault();
      var $this = $(this);
      var section =  $this.closest('ul').prev('h3').find('span[data-content]').data('content');
      var subSection = $this.attr("data-content");
      // we can now genrate the section content and push this into the tmpl.
      blade.Runtime.loadTemplate("guide_section.blade", function(err, tmpl) {
          tmpl({
              'sections': {
                  'section': section,
                  'subsection': subSection
              }
          }, function(err, html) {
              if(err) throw err;
                  console.log(html);
                  $('.mainarticle > .content').empty().html(html);
          });
      });
  });

そして私のテンプレートでは：

#guide_section
    - var i = sections.section
    - var c = sections.subsection
    h5(data-i18n="guide.sections."+i+".title")=i
        h4(data-i18n="guide.sections."+i+".contents.title")=c

上記のコードは jade のテンプレートに非常に似ています。

タイトルを返すというH5点で問題なく動作しますが、コンテンツ リストの n 番目の要素を返す方法がわかりません。

例えば：

h5(data-i18n="guide.sections."+i+".title")=i

としてレンダリングします

<h5 data-i18n="guide.sections.the-basics.title">the-basics</h5

これは正しいです。i18next が を検索し、値にtranslation.json基づいて正しい翻訳を設定しますが、data-i18n

data-i18n="guide.sections."+i+".contents.title"

としてレンダリングします

<h4 data-i18n="guide.sections.the-basics.contents[0]">0</h4

ただしcontents、この場合、次のような 2 つのエントリがあります。

[{
    "title": "Introduction",
    "content": {"p1": "", "p2": "", "p3": ""}
},{
    "title": "A Chapter in the Zeitgeist Movement",
    "content": {"p1": "", "p2": "", "p3": ""}
}]

contentsでは、インデックスを指定してリストのタイトルにアクセスできるようにスクリプトを変更するにはどうすればよいでしょうか。

4

1 に答える 1

0

これはhttp://i18next.com/pages/doc_features.html#objecttreeから取得したものであるため、私の場合、「content」は配列です。

ul.sub-section
    - var content = t("guide.sections."+i+".contents", { returnObjectTrees: true });
    - for(var c in content)
        - var section_title = t(content[c].title)
        li
            a.nav-link(href="#" data-bind=""+c data-content=""+section_title data-i18n="guide.sections."+i+".contents.title")=t(content[c].title)
于 2013-02-19T10:19:30.650 に答える