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.

Sign up for GitHub

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

Jump to bottom

Stateless with behavior not working #384

Closed
basickarl opened this issue Oct 24, 2016 · 3 comments
Closed

Stateless with behavior not working #384

basickarl opened this issue Oct 24, 2016 · 3 comments

Comments

@basickarl
Copy link
Contributor

The page displays, all the js appears to load, but the onClick handleThisClick handler isn't firing (which should display a console log) and the c-nav.scss css isn't being applied (#c-nav). The base.scss style is working though (red).

(I'm using lasso-babel/lasso-sass)

my route:

    let template = require('src/marko/pages/sign_in/sign_in.marko');
    ctx.body = template.stream({
        press: 'press'
    });

src/marko/pages/sign_in/sign_in.marko:

<lasso-page package-path="./browser.json" />

<layout-use( "../../layouts/base/base.marko", data) show-header=false>
    <layout-put into="body">
        BODY CONTENT ${data.press}
        <c-nav(data) />

    </layout-put>
    <layout-put into="footer">FOOTER CONTENT</layout-put>
    </layout-use>

src/marko/pages/sign_in/browser.json:

{
    "dependencies": [
        "../../components/c-nav/browser.json"
    ]
}

src/marko/layouts/base/base.js:

console.log('base.js included');

import text from './text.js';
text();

src/marko/layouts/base/base.marko:

<!-- lasso -->
<lasso-page package-path="./browser.json" />
<!-- /lasso -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>
        <layout-placeholder name="title" />
    </title>
    <!-- lasso -->
    <lasso-head/>
    <!-- /lasso -->
</head>

<body>
    <div class="base">base.marko body below</div>

    <layout-placeholder name="body" />

    <!-- lasso -->
    <lasso-body/>
    <!-- /lasso -->
    <!-- marko widgets -->
    <init-widgets/>
    <!-- /marko widgets -->
</body>

</html>

src/marko/layouts/base/base.scss:

.base {
    width: 100px;
    height: 30px;
    background: red;
}

src/marko/layouts/base/browser.json:

{
    "dependencies": [
        "require-run: ./base",
        "./*.scss"
    ]
}

src/marko/layouts/base/text.js:

'use strict';
export default () => {
    console.log('test.js included');
};

src/marko/components/c-nav/browser.json:

{
    "dependencies": [
        "require: marko-widgets",
        "require: ./widget",
        "./*.scss"
    ]
}

src/marko/components/c-nav/c-nav.js:
exports.render = require('./renderer').render;

src/marko/components/c-nav/c-nav.marko:

<nav role="navigation" id="c-nav" w-bind="./widget">
    <ul class="main-navigation">
        <li>
            <a href="/">Home</a>
        </li>
        <li>
            <div w-onClick="handleThisClick">${data.press}</div>
        </li>
    </ul>
</nav>

src/marko/components/c-nav/c-nav.scss:

#c-nav {
    background: green;
    width: 100%;
    height: 40px;
}

src/marko/components/c-nav/renderer.js:

module.exports = require('marko-widgets').defineRenderer({
    template: require('./c-nav.marko'),

    getInitialProps: function (input, out) {
        console.log(input);
        return input;
    }
});

src/marko/components/c-nav/widget.js:

module.exports = require('marko-widgets').defineWidget({
    handleThisClick: function () {
        console.log('c-nav click');
    }
});

The console fires base.js included and test.js included.
@patrick-steele-idem
Copy link
Contributor

Hey @basickarl, at first glance your setup looks correct. Are you seeing any errors? Do you see the <init-widgets> tag in the final HTML output (you shouldn't, but that might be a clue)?

@patrick-steele-idem patrick-steele-idem added the needs more info Original poster needs to provide more information before action can be taken label Oct 24, 2016
@basickarl
Copy link
Contributor Author

basickarl commented Oct 25, 2016 •
edited
Loading

@patrick-steele-idem Hello! I actually found out what the issue is. It's possibly related to lasso-js/lasso-marko#3.

I had to move the pages/sign_in/browser.json dependencies to the layouts/base/browser.jsondependencies. Which is weird, since I am declaring the usage of the components in pages/sign_in/sign_in.marko and not in layouts/base/base.marko.

@patrick-steele-idem
Copy link
Contributor

No longer an issue. Closing.

@patrick-steele-idem patrick-steele-idem removed the needs more info Original poster needs to provide more information before action can be taken label Feb 9, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@patrick-steele-idem @basickarl