msavin / Lamma

Layout Manager for Meteor-Blaze apps
14 stars 0 forks source link

Parrot Lamma #1

Open mozfet opened 5 years ago

mozfet commented 5 years ago

I've been trying to get Lamma working with Parrot.

I've created a bare meteor app, remove StaticHTML, added Blaze, Parrot and Lamma. https://github.com/mozfet/lamma-example

The main layout is rendered in /client/main.html using {{>main_layout}}.

In /ui/layout/main.js I register body and side layouts. Both have Parrot: true.

Setting the route to #foo cause the layout to be set {body: "foo", side: "foo"}. This is as expected and I have confirmed in the browser console using Layout.all(). I also confirm the route is triggered by logging from /imports/startup/client/routes, and where Parrot is initialized with home: "foo", and two routes are registered:

Router.register({
  foo: parameters => {
    console.log('foo route parameter:', parameters)
  },
  bar: parameters => {
    console.log('bar route parameters:', parameters)
  }
})

In /ui/layout/main.html I have two buttons, on linking to #foo and the other to #bar, and I layout the body and side in the main layout using {{>Layout name="body"}} and {{>Layout name="side"}}.

When the page is loaded, the main layout is shown, the route is logged, and the default is foo. Nothing wrong sofar. When you click on #bar, the route is logged, Layout.all() reports being updated as expected, however the layout is not updated in the browser.

mozfet commented 5 years ago

Lamma also does not seem to work by itself without PArrot. The same behavior continues when I remove the Parrot integration in /imports/ui/layouts/main.js:

Layout.register({
  body: {
    default: 'foo',
    notFound: 'notFound',
    processor: function (name) { return 'body_' + name },
    // Parrot: true
  },
  side: {
    default: 'foo',
    notFound: 'notFound',
    processor: function (name) { return 'side_' + name },
    // Parrot: true
  }
})

Template.main_layout.events({
  'click #js-foo-button'(event) {
    const instance = Template.instance()
    console.log('foo button click')
    Layout.set({body: 'foo', side: 'foo'})
  },

  'click #js-bar-button'(event) {
    const instance = Template.instance()
    console.log('bar button click')
    Layout.set({body: 'bar', side: 'bar'})
  }
})