component / reactive

Tiny reactive template engine
383 stars 48 forks source link

Access the parent model/view from `each`'s subView #140

Closed cristiandouce closed 10 years ago

cristiandouce commented 10 years ago

Is there a way to access a parent "main" model/view from an each sub-view?

I've tried with this.model, reactive.model, model.prop, with no luck.

Every time the getter function compiles to reactive.get('reactive.model.blah') instead of what I really want.

Here a screenshot:

defunctzombie commented 10 years ago

Your screenshot doesn't make sense to me without additional code.

What do you want to access? The main model or the main view?

Do you mean access in the template or in the js? There is no way currently to access any parent properties in the template within an each sub view (I don't think).

cristiandouce commented 10 years ago

Yeah, the last. I'd like to access the parent properties/methods within an each sub view.

Let's say I have a menu with a current prop and an array of items:

var menu = {
  current: '',
  items: [{name: 'home', title: 'Homepage' }, ....]
}

Then this view:

<ul>
  <li each="items" class="{name === **menu**.current ? 'active' : ''}" on-click="onselect" data-text="title"></li>
</ul>

And a view with the following handler on click:

function View () {
  this.menu = menu;
  this.view = reactive(template, this.menu, { handler: this });
}

View.prototype.onselect = function () {
  // get the value `name`
  this.reactive.set('current', name);
}

And I would expect that way that the "active" class toggle wheter the current item is the clicked/selected one or not. (Avoiding to manually touch the DOM unselecting and selecting by removing adding that class... reactive already manipulates the DOM, so why should I do it too?)

Does that make any sense?

I know it's currently not supported, but is a feature that would make developing reactive views easier IMHO.

Don't get me wrong. I don't mind doing some dom('.active', this.view.el).removeClass('active') and then dom(el.target).addClass('active'). But this could get done with reactive.

Sorry for the lame issue's description before.