json file to handlebars

时间:2016-04-21 22:11:04

标签: android json handlebars.js html-framework-7

I am developing a android app with framework7 which will show some info for vehicles. The first screen will contain a list with the vehicles types and the user can choose one type and then go to the next screen with the subcategories.I want to show the contexts of each set in a website using handlebars "{{}}". I did the first screen with the types but I was wondering if it is possible to use the handlebars to show the subcategories of each vehicle type in a different row(which the user will press and take him to the next page, which will have info for the subtype the user selected).
i have a json file with the following code:

    [
    { "id" : 1,
      "Vehicle type": "Hatchback"
      "Subtypes": "st1", "st2", "st3"
    },
    { "id" : 1,
      "Vehicle type": "motorcycle"
      "Subtypes": "mt1", "mt2", "mt3"
    }
    ]

1 个答案:

答案 0 :(得分:0)

如果您想使用把手{{}},则需要有模板

  1. 例如:

    <script id="template" type="text/template7">
        {{#each records}}
            <p>Vehicle type is:  {{Vehicle type}} </p>
        {{/each}}
    </script>
    
  2. 使用Template7编译模板:

    var template = $$('#template').html();
    var compiledTemplate = Template7.compile(template);
    
  3. 从服务器获取JSON数据:

    $$.getJSON('link/to/your/json', {}, function (data) {          
        var context = data;
    }
    
  4. 现在通过传递必需的上下文

    来渲染已编译的模板
    var html = compiledTemplate(context);
    
  5. 现在,html变量将包含您需要的html。例如:

        <p>Vehicle type is: Hatchback</p>
        <p>Vehicle type is: motorcycle</p>
    

    N.B。此代码尚未经过测试。第一步中的“记录”需要由JSON文件中的根节点替换。