Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Instantiating templates in HTML does not work with ClientLoad.FromDocument #170

Closed
teo-tsirpanis opened this Issue Apr 15, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@teo-tsirpanis
Copy link

teo-tsirpanis commented Apr 15, 2018

Here's an example:

Client.fs

namespace SPA1

open WebSharper
open WebSharper.JavaScript
open WebSharper.JQuery
open WebSharper.UI
open WebSharper.UI.Client
open WebSharper.UI.Templating

[<JavaScript>]
module Client =
    // The templates are loaded from the DOM, so you just can edit index.html
    // and refresh your browser, no need to recompile unless you add or remove holes.
    type IndexTemplate = Template<"index.html", ClientLoad.FromDocument>

    [<SPAEntryPoint>]
    let Main () =
        let firstName = Var.Create ""
        let lastName = Var.Create ""
        IndexTemplate.MainTemplate()
            .First("First")
            .FirstVar(firstName)
            .Second("Last")
            .SecondVar(lastName)
            .Doc()
        |> Doc.RunById "main"

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>SPA1</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="Content/SPA1.css" />
    <style>

        /* Don't show the not-yet-loaded templates */
        [ws-template], [ws-children-template] {
            display: none;
        }
    </style>
    <script type="text/javascript" src="Content/SPA1.head.js"></script>
</head>
<body>
    <h1>This site has a bug</h1>
    <div ws-template="MainTemplate">
        <div ws-attr="MainAttr">
            <!-- Instantiate the template for input fields. -->
            <!-- Creates the holes FirstVar and SecondVar for the main template. -->
            <!-- Fills the holes Id, Which and Var of Field in both instantiations. -->
            <ws-Field Var="FirstVar">
                <Id>first</Id>
                <Which>${First}</Which>
            </ws-Field>
            <ws-Field Var="SecondVar">
                <Id>second</Id>
                <Which>${Second}</Which>
            </ws-Field>
        </div>
        <!-- Declare the template for input fields -->
        <div ws-template="Field" class="field-wrapper">
            <label for="${Id}">${Which} Name: </label>
            <input ws-var="Var" placeholder="${Which} Name" name="${Id}" />
        </div>
    </div>
    <div id="main"></div>
    <script type="text/javascript" src="Content/SPA1.min.js"></script>
</body>
</html>

Screenshot
image

Now, remove ClientLoad.FromDocument...

image

@Tarmil

This comment has been minimized.

Copy link
Member

Tarmil commented Apr 16, 2018

Right, I can reproduce this. Looks like there's a problem with the order of operations, we try to instantiate ws-Field before parsing the ws-template="Field". For now you can work around this by defining the ws-template="Field" earlier, before the ws-template="MainTemplate"; then it works.

@Tarmil Tarmil added the bug label Apr 16, 2018

@Tarmil Tarmil closed this in 55e613d Apr 21, 2018

@Tarmil Tarmil added the 4.2.6.118 label May 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.