LivePreview injection break the html page

ZhijieWang commented 10 years ago

I am trying to learn ember.js following the official getting started guide.

This is the webpage seen in regular chrome when opened the disk file. capture1

This is the webpage seen in "LivePreview" mode. (Live preview opened another instace of chrome).

capture2

Here is the attached source of the page

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Ember Starter Kit</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
</head>

<body>
<script type="text/x-handlebars">
    <div class = "navbar-inner" > 
        <a class = "brand" href = "#"> Bloggr </a>
        <ul class="nav">
            <li>{{#link-to 'posts' }} Posts{{/link-to}} </li>
            <li>{{#link-to 'about' }} About{{/link-to}} </li > 

        </ul> 
             {{outlet}}
    </div>
</script>
<script type="text/x-handlebars" id="about">
    <p > My name is Tom Dale.I helped create <a href = "http://www.emberjs.com/" > Ember.js </a>, a JavaScript framework that brings sanity to the web.</p>

     <p > In October of 2011, I co - founded <a href = "http://www.tilde.io" > Tilde </a> with Yehuda Katz, Leah Silber and Carl Lerche.</p>

     <p > In my spare time I run a cash -
    for -beer exchange program at many local San Francisco dive bars. </p>
</script>

<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.5.1.js"></script>
<script src="js/app.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js">      </script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="tests/runner.js"></script>
</body>

</html>

peterflynn commented 10 years ago

Reviewed - medium priority @dangoor to investigate what our HTML instrumentation might be doing to break this.

@ZhijieWang However, note that we don't yet support live updating of tempate-driven content (i.e. content that's rendered dynamically on the client side by JS code). The initial page should still render correctly, but if you edit the templates you won't get live updating. Only live CSS updating would work for a page like this.

(Live updating for templates is further down our timeline - the Live Highlighting for templates feature would be the first step in that direction though, if you'd like to upvote it and/or track its progress.

ZhijieWang commented 10 years ago

@peterflynn Thank you. I fully understand that Live update will be much later. I just want this Bracket not break the page.The initial page is not render correctly.

peterflynn commented 10 years ago

Reopening -- @ZhijieWang did you mean to close this? We intended to investigate why the initial page render is broken...

adobe / brackets

LivePreview injection break the html page #7658