Pure with Backbone.js for progressive enhancement

[R. Rajesh Jeba Anbiah]

Has anyone tried Pure template with Backbone.js for progressive
enhancement? This may void the need for script template and so may
reuse the HTML code rendered from server.

Note: I posted same question in Backbone.js forum but left with no
reply https://groups.google.com/group/backbonejs/browse_thread/thread/07a9c16c06cf06d0

[Mic (BeeBole)]

pure.js converts one HTML to an other.
It can then be integrated transparently with other tools.

I don't know well backbone.js, what benefits would you get to use them
both?


On Mar 2, 6:24 am, "R. Rajesh Jeba Anbiah"

> replyhttps://groups.google.com/group/backbonejs/browse_thread/thread/07a9c...

[Timothy Washington]

I'm using Backbone.js and Pure templates on a project that I'm building. But I'm not sure I understand what you mean by "progressive enhancement". 

I find that Pure templates give me complete separation of layout and logic code, which is the holy grail for me. So I can take a Backbone view (over an HTML template), pass data and directives to pure's render function, and voila, the HTML template is now filled with my data. I was able to create my HTML layout completely independent of any notion of any embedded, foreign code (erb, moustache, etc). The only other thing I've seen come close is Enlive for clojure. 

EntryView = Backbone.View.extend({

  

  render : (options) ->

    

    $(".my_selector").render( { puredata : this.model.get('content') } , pureDirectives.entryDirective )

You can see here, how I'm using it. 

HTH 

Tim Washington 

Interruptsoftware.ca 

416.843.9060 

--
You received this message because you are subscribed to the Google Groups "JavaScript Templates Engine PURE" group.
To post to this group, send email to Pure-Unobtrusive...@googlegroups.com.
To unsubscribe from this group, send email to Pure-Unobtrusive-Rende...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/Pure-Unobtrusive-Rendering-Engine?hl=en.

[WebSpin.Biz]

I've been doing this too, I've used Pure.js for a few years now and it is the best templating engine imho, but now I'm trying to see if it would be better to drop PURE and instead use model to view bindings (like ModelBinder), instead of re-rendering entire pure templates, something more granular and dynamic

Tim Washington 

Interruptsoftware.ca 

416.843.9060 

To post to this group, send email to Pure-Unobtrusive-Rendering-Eng...@googlegroups.com.
To unsubscribe from this group, send email to Pure-Unobtrusive-Rendering-Engine+unsubscribe@googlegroups.com.

[Mic (BeeBole)]

The main drawback I see of re-rendering templates on user input is you may loose the cursor.

Another is to loose event bindings. But if you use event delegation, and bind them as directive(I do that), it is not a real problem.

Something else?

The idea of pure v3, was to keep the DOM intact, removing totally innerHTML.

Since DOM nodes can't be cloned with a fast reference, we would move from a compiled mode to an interpreted mode.

For single replacement, it is faster than v2.

However the loop of nested templates slow with the complexity, making it impossible to match the current v2 performance.

We need another performance jump from the browsers to make an only DOM engine fast enough.

I'm not a fan of MVCs, from my experience the magic fades rather quickly when you start to have more complex cases.

The recent Google polymer is very interesting though.

We use this kind of approach in our app, where everything is a widget, and can be nested with a pub/sub kind of eventing.

But with an unfair advantage, as they can adapt the browser to it :)

If you have an example to share that would compare both approaches: manual vs. model that would be great.

Cheers,

[Timothy Washington]

Hi, 

Were you able to get Purejs working with Google's Polymer? Polymer indeed looks interesting. I just want to make sure that we're able to manipulate that shadow DOM. Using Clojurescript, I've had issues instantiating Polymer in the webcomponents.js (also), that comes with Polymer. Does Purejs handle this cleanly? 

Thanks for all your work on this. 

Tim Washington 

Interruptsoftware.com 

[Mic (BeeBole)]

Hi Tim,

The $p object works as long as a DOM is present.

Not sure what is a shadow DOM for polymer, but if it's in memory instead of being in the document, it should work too.

Did you try it, and it didn't work?

But polymer is about components, right? Why do you want still to use a templating engine?

Cheers,

On Saturday, 20 December 2014 16:40:37 UTC+1, frye wrote:

Hi, 

Were you able to get Purejs working with Google's Polymer? Polymer indeed looks interesting. I just want to make sure that we're able to manipulate that shadow DOM. Using Clojurescript, I've had issues instantiating Polymer in the webcomponents.js (also), that comes with Polymer. Does Purejs handle this cleanly? 

Thanks for all your work on this. 

Tim Washington 

Interruptsoftware.com 

[Timothy Washington]

Hey, sorry for the delay in responding. 

Polymer is Google's set of web components. And it's a good starting point. But I'll still need to populate lists and item details from in-memory data. I haven't tried using pure with polymer yet. I wanted to see if someone had a successful pass with it. I'm not sure how the shadow DOM will play into the templating. If I give it a shot, I'll definitely report back.

Cheers 

Tim Washington 

Interruptsoftware.com 

--
You received this message because you are subscribed to the Google Groups "JavaScript Templates Engine PURE" group.

To unsubscribe from this group and stop receiving emails from it, send an email to Pure-Unobtrusive-Rende...@googlegroups.com.
To post to this group, send email to Pure-Unobtrusive...@googlegroups.com.
Visit this group at http://groups.google.com/group/Pure-Unobtrusive-Rendering-Engine.
For more options, visit https://groups.google.com/d/optout.

[co...@chrisrichardsgroup.com.au]

I see this is an old post, but I just wanted to share my experience with Backbone with PURE.

The two work extremely well together, I override the render function on Backbone.View itself, like so:

	_.extend(Backbone.View.prototype, {
		template: _.memoize(function(directives) {
			return this.$el.compile(directives);
		}, JSON.stringify),
		render: function(model) {
			var d = model || this.model;

			if (d instanceof Backbone.Collection)
				d = {'collection': d.toJSON()};
			else if (d.toJSON)
				d = d.toJSON();

			if (_.isEmpty(this.directives))
				this.setElement(this.$el.autoRender(d));
			else
				this.setElement(this.$el.render(d, this.template(this.directives)));

			return this;
		}
	});

This makes the implementation of View as simple as specifying the directives object:

	  DocumentPicker = Backbone.View.extend({
		el: '#picker',
		directives: {
			'.models': {
				'd<-collection': {
					'.name': 'd.name',
					'.id': 'd.id',
					'.open@href': '#docs/#{d.id}',
					'.edit@href': '#docs/#{d.id}/details',
					'.remove@href': '#docs/#{d.id}/remove',
				}
			}
		},
		events: {
			...
		},
		...
	});

Or simply rely on autoRender, the template gets memoize'd and it works beautifully.

My only wish is for two data-binding... something like stickit

Cheers,

Corin