<p>As the title says, I'd like to have my web application only re-render content that has been changed. From searching around, it seems like a solution involves executing only the templates that have been changed whenever a GET/POST/whatever request happens, however I'm not entirely sure how to achieve this with the function that I'm using to handle template rendering, which is here:</p>
<pre><code>func RenderTemplate(w http.ResponseWriter, r *http.Request, templateName string, data map[string]interface{}) {
if data == nil {
data = map[string]interface{}{}
}
funcs := template.FuncMap{
"yield": func() (template.HTML, error) {
buf := bytes.NewBuffer(nil)
err := templates.ExecuteTemplate(buf, templateName, data)
return template.HTML(buf.String()), err
},
}
layoutClone, _ := layout.Clone()
layoutClone.Funcs(funcs)
err := layoutClone.Execute(w, data)
if err != nil {
http.Error(w, fmt.Sprintf(errorTemplate, templateName, err), http.StatusInternalServerError)
}
}
</code></pre>
<p>This is mostly from one of the books about developing web applications in Go. Because the template layout gets executed each time, is it inevitable that on any POST or other request that causes a refresh, the elements in the layout.html file will get re-executed as well?</p>
<p>If this is the case, how do people go about having a template file while preventing a full re-rendering of the page when only part of it has changed (new data following a call to the database in my case, which affects only a section of the page).</p>
<hr/>**评论：**<br/><br/>gohacker: <pre><p>On the server side: an API which returns JSON data (or HTML, or whatever).</p>
<p>On the client side: an AJAX request from the client JavaScript code.</p></pre>qxclpxzk: <pre><p>I recommend <a href="https://vuejs.org/" rel="nofollow">Vue.js</a> for the client-side. This lets you bind JavaScript data to a statically-served HTML template. Then you can fetch/update your data with AJAX requests.</p></pre>ConfuciusBateman: <pre><p>This looks quite promising, and much less "all-consuming" than React. I think I'll check this out! If I were to turn the div that holds information pulled from the database into a Vue component, the reactivity seems like it would help. However, I guess I'm still making a POST request when I talk to the database, which is causing the whole page to re-render. I'll have to work it out.</p></pre>qxclpxzk: <pre><p>What are you using to make POST requests?</p>
<p>This can prevented with things like:</p>
<ul>
<li><code>event.preventDefault()</code> -- default JS</li>
<li><a href="https://vuejs.org/v2/guide/events.html" rel="nofollow"><code>v-on:submit.prevent="onSubmit"</code></a> -- vue</li>
</ul>
<p>Also check out <a href="https://github.com/pagekit/vue-resource" rel="nofollow">vue-resource</a> and <a href="https://github.com/mzabriskie/axios" rel="nofollow">axios</a>.</p></pre>ConfuciusBateman: <pre><p>I'm using httprouter, with a simple call like this:</p>
<pre><code> router.Handle("POST", "/", HandleWordSearch)
</code></pre>
<p>HandleWordSearch then looks like this:</p>
<pre><code>func HandleWordSearch(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
word := r.FormValue("word")
anagrams, err := SearchDBForAnagrams(word)
if err != nil {
// Render an error in the template instead
panic(err)
}
RenderTemplate(w, r, "index/home", map[string]interface{}{
"WordsEnglish": anagrams,
})
}
</code></pre>
<p>The issue I feel like is RenderTemplate (in the OP), which is rendering the entire template (as opposed to only the part that is changing). If I prevent the submit on the form that triggers this POST, wouldn't that prevent the POST request from happening? Thanks for the resources by the way!</p></pre>qxclpxzk: <pre><p>You want your HandleWordSearch to just return some JSON rather than rendering a template. I recommend having an <code>/api/</code> group for your JSON endpoints to separate them from the ones that render HTML.</p>
<p>The prevent statements will stop the browser from visiting the submit URL so you can handle things in-page with AJAX requests via vue-resource, axios, JQuery, etc.</p></pre>ConfuciusBateman: <pre><p>That makes a lot of sense, I'm not sure why I defaulted to having that function call render when I can just return the data (as you said) and pass that to a Vue component. Thank you for the advice!</p></pre>
