Question

这是我的代码。此时只有一个产品展示。我想通过点击按钮或页面加载来显示所有产品。

<html>
<head>
    <title>
        Products
    </title>

    <script src="/appmachine/core.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript" src="/bridge/core.js"></script>

    <link rel="stylesheet" href="styles.css">

    <script src="script.js" type="text/javascript"></script>

    <script type="text/javascript"> window.App</script>

</head>

<body>

    <p id="name"></p> 
    <p id="imageid"></p>
     <p id="shop"></p>
     <p id="description"></p>

    <a onClick="window.App.navigateToBlock('products', function(alert('Succes')))">Test</a>

</body>

 <script>

App.getCurrentRecord(function(products){
document.getElementById('name' ).innerHTML = products.name; 
document.getElementById('imageid').innerHTML = '<img width="300" src="'+ products.imageid +'"/>'; 
document.getElementById('shop').innerHTML = products.shop; 
document.getElementById('description').innerText = products.description; 
});

</script>
</html>

Answer 1

手动DOM操作很痛苦，请尝试使用模板。

此示例使用mustache.js，但您可以使用您喜欢的任何内容。

<强> JSBin Demo

<div id="target"></div>

<script id="template" type="x-tmpl-mustache">
  {{#products}}
  <p id="name">{{ name }}</p> 
  <img id="imageid" src="{{imageid}} />
  <p id="shop">{{ shop }}</p>
  <p id="description">{{ description }}</p>
  {{/products}}
</script>

语法{{#products}} {{/products}}指定基于JSON数据的列表。

var products = {
  "products": [{
    name: "Alice",
    imageid: '<img width="300" src="#"/>',
    shop: 'Test Shop',
    description: 'test description'
  }, {
    name: "Bob",
    imageid: '<img width="300" src="#"/>',
    shop: 'Another Shop',
    description: 'super description'
  }]
};

使用此数据，您可以使用JavaScript填充模板。

function loadView(products) {
  var template = $('#template').html();
  Mustache.parse(template);

  var rendered = Mustache.render(template, products);
  $('#target').html(rendered);
}

loadView(products);

在列表视图JavaScript中显示数据

1 个答案: