Question

我有一个Flask应用程序，我希望用户可以实时查看选择一组不同参数的效果。因此，我在网页上显示了一个滑块，在用户选择其他参数之后，我想强制重新计算模型并重新显示网页。

这是我尝试过的：

在我的html中：

<div class="""slidecontainer">
         <input type="range" min="1" max="100" value={{ slider_value }} class="slider" id="myRange">
        <p>Value: <span id="demo"></span></p>
</div>

<script>
  var slider = document.getElementById("myRange");
  var output = document.getElementById("demo");
  output.innerHTML = slider.value;

  var slider_value;
  slider.onchange = function() {
     output.innerHTML = this.value;
     slider_value = this.value;
     doWork();
  }
function doWork() {
    // ajax the JSON to the server
    $.ajax({
     type: 'POST',
     url: '/receiver',
     data: JSON.stringify (slider_value),
     success: function(data) { alert('data: ' + data); },
     contentType: "application/json",
     dataType: 'json'
  });
}

在我的Python app.py中：

@app.route("/receiver", methods = ['POST','GET'])
def worker():
   # read json + reply                                                                                                                                                                           
   data = request.get_json()
   print("Data = ",data)

   new_output = my_model.calculate(data)

   return render_template("complete.html",new_output)

但是，即使我看到用户更改幻灯片值时，它也确实会返回到Python代码中（因为我看到了“ Data = ...”打印输出），但显示的网页永远不会更新为new_output。有什么方法可以强制使用新输出呈现模板吗？

谢谢！

Answer 1

<p> {({ serverValue })} <p>
<input v-model="sliderValue">

<script>
    var vm = new Vue({
        el: '#vue-container',        // make sure relevant html is inside a div with id="vue-container"
        delimiters: ['{({', '})}'],  // separate Vue delimiters from JinJa2
        data: {
            serverValue: 'no initial data',
        },
        watch: {
            // whenever sliderValue changes, this function will run
            sliderValue: this.calculateServerSide();
        methods: {
            calculateServerSide: function () {
                vmObj = this;  // access Vue instance inside Ajax calls.
                $.getJSON($SCRIPT_ROOT + '/_add_numbers', {
                    a: 10,
                    b: 20
                }, function (data) {
                    console.log(data);
                    vmObj.serverValue = data.result;
                });
            },
        }
    })
</script>

https://vuejs.org/v2/guide/computed.html#Watchers

我在评论中暗示的事情的一个例子。

强制从Flask应用中重新加载模板？

1 个答案: