View without a template ....

20 views
Skip to first unread message

ladd.james

unread,
Nov 5, 2012, 8:13:38 PM11/5/12
to mari...@googlegroups.com
I would like a view that just handles an existing set of DOM nodes (html elements)
so I don't have a need for a template.

I'm not sure how to do this and I can't find an example in the Maria source.

How can I make a view that doesn't have a template?


Peter Michaux

unread,
Nov 5, 2012, 8:22:51 PM11/5/12
to mari...@googlegroups.com
Something like the following might be appropriate

maria.ElementView.subclass(myApp, 'MyView', {

constructor: function(rootEl) {
maria.ElementView.call(this);
this._rootEl = rootEl;
},

properties: {
buildTemplate: function() {} // overrides
maria.ElementView.prototype.buildTemplate
}

});

Is that what you were after?

Peter

ladd.james

unread,
Nov 6, 2012, 12:12:08 AM11/6/12
to mari...@googlegroups.com
I have tried the following and I get:

Uncaught Error: evento.addEventListener: Supported EventTarget interface not found.

I'm passing in what I think is a valid rootEl - and - my buildTemplate has no
body. Just like below.

I went down this path because when I'm creating a View I want the 'template' inserted
before the element identified by 'getContainerEl' but I could not achieve that. Instead
opting to manually make the element in a higher template and then 'attach' to it in
a subview.

A working example of attaching a Maria view to existing HTML (ie: no template file) would
be very helpful.

Peter Michaux

unread,
Nov 6, 2012, 3:35:40 AM11/6/12
to mari...@googlegroups.com
On Mon, Nov 5, 2012 at 9:12 PM, ladd.james <ladd....@gmail.com> wrote:
> I have tried the following and I get:
>
> Uncaught Error: evento.addEventListener: Supported EventTarget interface not
> found.
>
> I'm passing in what I think is a valid rootEl - and - my buildTemplate has
> no
> body. Just like below.
>
> I went down this path because when I'm creating a View I want the 'template'
> inserted
> before the element identified by 'getContainerEl' but I could not achieve
> that.

If a view has child views then the the child views nodes should be
descendents of the view's node. They child view's nodes will not come
after the view's nodes.

> Instead
> opting to manually make the element in a higher template and then 'attach'
> to it in
> a subview.
>
> A working example of attaching a Maria view to existing HTML (ie: no
> template file) would
> be very helpful.

I had a mistake. The view's rootEl property cannot be set until after
the build process happens as the build process will not happen if the
rootEl has already been set. Storing in a rootToBe property works...

<!DOCTYPE html>
<html>
<head>
<title>No Template</title>

</head>
<body>

<div id="wrapper">
<p class="clickable">click me</p>
</div>

<script src="http://michaux.ca/downloads/maria/rc4/maria.js"
type="text/javascript"></script>

<script type="text/javascript">

var myApp = {};

maria.ElementView.subclass(myApp, 'MyView', {
constructor: function(rootEl) {
maria.ElementView.call(this);
this._rootToBe = rootEl;
},
uiActions: {
'click .clickable': 'onClickClickable'
},
properties: {
buildTemplate: function() {
this._rootEl = this._rootToBe;
}
}
});

maria.Controller.subclass(myApp, 'MyController', {
properties: {
onClickClickable: function() {
alert('was clicked');
}
}
});

maria.addEventListener(window, 'load', function() {
var view = new myApp.MyView(document.getElementById('wrapper'));
view.build();
});

</script>

</body>
</html>


Peter

ladd.james

unread,
Nov 6, 2012, 6:31:14 PM11/6/12
to mari...@googlegroups.com
Great - Ill give this a try a.s.a.p
Reply all
Reply to author
Forward
0 new messages