search

arturadib / agility

Javascript MVC for the "write less, do more" programmer
http://agilityjs.com
MIT License
542 stars 70 forks source link

when I use '&' before Css selector,but the string is still black #61

Closed phoebepei closed 12 years ago

phoebepei commented 12 years ago

I just copy the code these code from doc,but it doesn't work! does I do something wrong?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Agility style-need-& </title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="agility.js" charset="utf-8"></script>
</head>
<body>
    <script type="text/javascript" charset="utf-8">
        var obj = $$({}, '<p><div>Do this</div></p>', '& div { color:red; }');
        $$.document.append(obj);
    </script>
</body>
</html>
tristanls commented 12 years ago

Hey @phoebepei, looks like you are correct

I've gotten both

var obj = $$({}, '<p><div>Do this</div></p>', '& { color:red; }');

and

var obj = $$({}, '<p><div>Do this</div></p>', 'div { color:red; }');

to show red, but not 

var obj = $$({}, '<p><div>Do this</div></p>', '& div { color:red; }');

the last example ( which is what isn't working, same as you provided ) generates the following html

<head>
  <style type="text/css">.agility_1 div { color:red; }</style>
</head>
<body>
  <p class="agility_1"></p>
  <div class="agility_1">Do this</div>
  <p class="agility_1"></p>
</body>

@arturadib , looks like the wrong structure is generated ( notice each <p> and <div> get the "agility_1" class and both <p>'s are closed off.

phoebepei commented 12 years ago

@tristanls , here is another exmaple in the document

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Agility complex-need-& </title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="agility.js" charset="utf-8"></script>
</head>
<body>
    <script type="text/javascript" charset="utf-8">
        var obj = $$({
            view:{
                format: '<div>\
                        <div id="hello">Hello</div>\
                        <div id="world">World</div>\
                        </div>',
                style: '& {border:5px solid green; color:white;}\
                        & div {padding: 10px 20px;}\
                        & #hello { background: blue; }\
                        & #world { background: red; }'
                }

        });
        $$.document.append(obj);
    </script>
</body>
</html>

it works well...... I think the reason may be that div should be the root or div shouldn't be the descendant of other element not div? Or the '&' refers to the first div in the view? I modified the previous example to be 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Agility style-need-& </title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="agility.js" charset="utf-8"></script>
</head>
<body>
    <script type="text/javascript" charset="utf-8">
        var obj = $$({}, '<div><p>Do this</p></div>', '& p { color:red; }');
        $$.document.append(obj);
    </script>
</body>
</html>

it works!

arturadib commented 12 years ago

looks like the wrong structure is generated

That's a DOM limitation (not Agility's) and I completely missed that in the Docs!

(You can't insert block elements inside a paragraph, so the browser falls back to the structure you quoted, see http://www.w3.org/TR/html401/struct/text.html#h-9.3.1).

I've fixed the docs, thanks @phoebepei and @tristanls !