在 Odoo 12 中从 <script> 标签获取 t t-esc 标签的值

Question

我试图获取 Odoo 中某个位置的当前坐标。我从下面的代码中得到了警报中的经度和纬度：

<button onclick="getLocation()">Try It</button>

                            <p id="demo"></p>

                            <script>
                                var x = document.getElementById("demo");

                                function getLocation() {
                                if (navigator.geolocation) {
                                navigator.geolocation.getCurrentPosition(showPosition);
                                } else {
                                x.innerHTML = "Geolocation is not supported by this browser.";
                                }
                                }
                                function showPosition(position) {
                                x.innerHTML = "Latitude: " + position.coords.latitude +
                                "Longitude: " + position.coords.longitude;
                                }
                            </script>

但是我们怎样才能分别在我的 Odoo 字段 gps_coordinates_latitude 和 gps_coordinates_longitude 中获得这些坐标呢？这是我在 Odoo 中的模板文件：

<template id="create_case" name="Create Case">
    <t t-call="website.layout">
        <div class="container">
            <script>
                var x = document.getElementById("demo");

                function getLocation() {
                if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
                } else {
                x.innerHTML = "Geolocation is not supported by this browser.";
                }
                }

                function showPosition(position) {
                var lati = position.coords.latitude; <t t-esc="gps_coordinates_latitude"/>
                alert(position.coords.longitude);
                x.innerHTML = "Latitude: " + position.coords.latitude +
                "Longitude: " + position.coords.longitude;
                alert(position.coords.latitude);
                }
            </script>

            <h1 class="text-center mt16 mb16">Create Case</h1>
            <p>Click the button to get your coordinates.</p>
            <button onclick="getLocation()">Try It</button>
            <p id="demo"></p>
            <form action="/mycase/process" method="POST" class="form-horizontal mt32" enctype="multipart/form-data">
                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                <div t-attf-class="form-group #{error and 'case_title' in error and 'has-error' or ''}">
                    <label class="control-label" for="case_title">Case Title</label>
                    <input type="text" class="form-control" name="case_title" required="True"
                           t-attf-value="#{case_title or ''}"/>
                </div>
                <div t-attf-class="form-group #{error and 'case_description' in error and 'has-error' or ''}">
                    <label class="control-label" for="case_description">Case Description</label>
                    <input type="text" class="form-control" name="case_description" required="True"
                           t-attf-value="#{case_description or ''}"/>
                </div>
                <div t-attf-class="form-group #{error and 'case_type' in error and 'has-error' or ''}">
                    <label class="control-label" for="case_type">Case Type</label>
                    <select class="form-control" id="case_type" name="case_type" required="True">
                        <t t-foreach="case_type" t-as="case_type">
                            <option t-attf-value="#{case_type.id}">
                                <t t-esc="case_type.name"/>
                            </option>
                        </t>
                    </select>
                </div>
                <div t-attf-class="form-group #{error and 'project' in error and 'has-error' or ''}">
                    <label class="control-label" for="project_name">Projects</label>
                    <select class="form-control" name="project_name" required="True">
                        <t t-foreach="projects" t-as="project">
                            <option t-attf-value="#{project.id}">
                                <t t-esc="project.name"/>
                            </option>
                        </t>
                    </select>
                </div>

                <div>
                    <label class="control-label" for="gps_coordinates_latitude">Latitude</label>
                    <input type="text" class="form-control" name="gps_coordinates_latitude"
                           t-attf-value="#{gps_coordinates_latitude or ''}"/>
                </div>

                <div t-attf-class="form-group #{error and 'case_description' in error and 'has-error' or ''}">
                    <label class="control-label" for="gps_coordinates_longitude">Longitude</label>
                    <input type="text" class="form-control" name="gps_coordinates_longitude" required="True"
                           t-attf-value="#{gps_coordinates_longitude or ''}"/>
                </div>

                <div t-attf-class="form-group #{error and 'ratings' in error and 'has-error' or ''}">
                    <label class="col-form-label" for="ratings">Ratings</label>
                    <select class="form-control o_website_form_input" name="ratings" required="false"
                            widget="priority">
                        <option value="normal">Normal</option>
                        <option value="good">Good</option>
                        <option value="very_good">Very Good</option>
                        <option value="excellent">Excellent</option>
                    </select>
                </div>
                <div t-attf-class="form-group #{error and 'attachment' in error and 'has-error' or ''}">
                    <label class="col-form-label" for="attachment">Attachments</label>
                    <input id='attachment' type="file" class="form-control o_website_form_input"
                           name="attachment" multiple="true" data-show-preview="true"/>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-lg">Submit Case</button>
                </div>
                <div class="oe_chatter">
                    <field name="message_follower_ids" widget="mail_followers"/>
                    <field name="message_ids" widget="mail_thread"/>
                </div>
            </form>
        </div>
    </t>
</template>

Answer 1

只要直接在 js 上获取值，就不需要使用 t t-esc。

您应该修改您的 js 并将值分配给您的输入字段 gps_coordinates_latitude 和 gps_coordinates_longitude，类似于

document.getElementsByName("gps_coordinates_latitude")[0].value = position.coords.latitude;
document.getElementsByName("gps_coordinates_longitude")[0].value = position.coords.longitude;

希望这能解决您的问题。