рули и JSON данные, поступающие из выборки - PullRequest
Новая
       12

рули и JSON данные, поступающие из выборки

0 голосов
/ 27 мая 2020

У меня есть приведенный ниже код и две отдельные проблемы, поэтому, пожалуйста, ответьте на это:

Проблема 1 [выборка?]: Отображаемые данные не меняются при изменении JSON. Похоже, это проблема с кешем, поскольку я не вижу ни одного HTTP-запроса, кроме исходного. Как я могу принудительно загружать файл JSON каждый раз заново?

Проблема 2 [handlebars?]: With $ (document.body) .append (html); в l oop он продолжает переписывать вместо редактирования значений. Как это изменить?

Вот код:

javascript. js: 

async function fetch_json() {
    try {
        var resp = await fetch('http://localhost:8000/data.json', {mode: 'cors'});
        var jsonObj = await jsonify(resp);
        return jsonObj;
    } catch (error) {
        // all errors will be captured here for anything in the try block
        console.log('Request failed', error);
    }
}

html page: 

<script id="handlebars-demo" type="text/x-handlebars-template">
    <div>
        {{#each this}}
            Name : {{name}} Value : {{value}} <br>
        {{/each}}
    </div>
</script>
<script type="text/javascript">
    var test_data = [{ "name" : "john doe", "value" : "developer" },{ "name" : "bob boby", "value" : "developer2" }];
    setInterval(function() {
        test_data = fetch_json()
            .then(function(result) {
            html = templateScript(result);
            //$(document.body).append(html);
        })
    }, 1000);

    var template = document.getElementById('handlebars-demo').innerHTML;
    Compile the template data into a function
    var templateScript = Handlebars.compile(template);
    var html = templateScript(test_data);
    $(document.body).append(html);
</script>

любая помощь будет очень признательна, спасибо!

1 Ответ

1 голос
/ 27 мая 2020

Вы должны создать элемент DOM для хранения HTML, которое вы генерируете. В этом примере я создал <div id="content"></div>.
Вы можете использовать $ (). html (), чтобы каждый раз перезаписывать HTML вместо добавления.
$('#content') выбирает элемент DOM с идентификатором = content, а затем замените HTML внутри .html(string) строкой.

Обычный подход к очистке кеша - прикрепить временную метку к URL-адресу в качестве параметра запроса URL-адреса, что я сделал путем объединения nocache='+new Date().getTime().
При нормальном использовании в производстве обычно генерируется уникальный идентификатор за версию для каждого ресурса после сборки. 

// for demo purposes, overwrite value property with username property
jsonify = x => x.json().then(x => x.map(x => ({ ...x,
  value: x.username
})));

async function fetch_json() {
  try {
    // append timestamp to prevent caching
    var resp = await fetch('https://jsonplaceholder.typicode.com/users?nocache=' + new Date().getTime(), {
      mode: 'cors'
    });
    var jsonObj = await jsonify(resp);
    return jsonObj;
  } catch (error) {
    // all errors will be captured here for anything in the try block
    console.log('Request failed', error);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.js" integrity="sha256-ZafrO8ZXERYO794Tx1hPaAcdcXNZUNmXufXOSe0Hxj8=" crossorigin="anonymous"></script>

<div id="content"></div>

<script id="handlebars-demo" type="text/x-handlebars-template">
  <div>
    {{#each this}} Name : {{name}} Value : {{value}} <br> {{/each}}
  </div>
</script>
<script type="text/javascript">
  var test_data = [{
    "name": "john doe",
    "value": "developer"
  }, {
    "name": "bob boby",
    "value": "developer2"
  }];
  setInterval(function() {
    test_data = fetch_json()
      .then(function(result) {
        html = templateScript(result);
        $('#content').html(html);
      })
  }, 2000);

  var template = document.getElementById('handlebars-demo').innerHTML;
  //Compile the template data into a function
  var templateScript = Handlebars.compile(template);
  var html = templateScript(test_data);
  $('#content').html(html);
</script>
...