henrikjoreteg / human-view Goto Github PK

What does this mean, and how/why do I use it?

1. A pattern for easily including the view's base element into render. Rather than having to specify tag type and attributes in javascript in the view definition you can just include that in your template like everything else.

Using the events collection to bind events to the view actually binds the events to any element in the DOM that matches the selector passed in.

Instead, the events should bind only to children of the view's $el.

Bare with me, this is not easy or simple to explain.

The array you create called "views" on line 228 which is then used to store "copies" of the rendered views on line 253 is causing problems for Internet Explorer 10.

The problem is, IE10 maintains a reference between the original view and the "copy" of the view stored in views[], so when you set containerEl[0].innerHTML = '' on line 265, IE10 also wipes the innerHTML of the "copy" of the view which was stored in views[]. (All other browsers leave the innerHTML of the view stored in views[] intact.)

Then, when addView() is called for each view in reRender(), say, when a new model is added to the collection via create(), containerEl tries to append the retrieved view (from line 250) to itself on line 259, but the view.el's innerHTML is blank at that point because of line 265.

This causes all views to disappear when a new model is added to a collection and the views are reRender()ed. You can test this behavior in IE10 by doing the following:

function reRender() {
// empty without using jQuery's empty (which removes jQuery handlers)
for (var i = 0, l = views.length; i < l; i++){
console.log(views[i].el.innerHTML);
}
containerEl[0].innerHTML = '';
for (var i = 0, l = views.length; i < l; i++){
console.log(views[i].el.innerHTML);
}
collection.each(addView);
}

Looping the views[] array before and after the containerEl clears its HTML gives you a different result in IE10 vs any other browser. In IE10, the views in views[] all have correct innerHTML before containerEl clears its own innerHTML, and then empty innerHTML after. In all other browsers, the innerHTML in the views[] array is correct both before and after.

I tried several solutions to this bug, but have not solved it. I attempted to put a bandaid on the problem with my pull request #19, but that caused unexpected problems with event bindings. One solution was to pass the view through JSON.stringify then JSON.parse to create a true "copy" of the view to store in the views[] array, but while IE10 was OK with that, the other browsers choked while trying to stringify a circular ref inside the view object. Other attempts to create true copies of the view object to store in the views[] array also failed.

Somehow, the copy of the view stored in views[] needs to be "detached" from the original view object, otherwise IE10 will always destroy the innerHTML of all the views that get passed through reRender(), leaving blank markup on the page.

A fix for this would remove the need for PR #19, which is now clearly not the correct solution.

We currently do something like this for renderCollection: https://github.com/HenrikJoreteg/human-view/blob/master/human-view.js#L193-L194

But this could be more generic and let you use it for simple subviews too.

https://github.com/HenrikJoreteg/human-view/blob/master/human-view.js#L17-L22

Haven't dug into it completely, but as far as I can tell we only register subviews on the initial collection render (https://github.com/HenrikJoreteg/human-view/blob/master/human-view.js#L215) any collection views added later won't be added to that list.

I'd like to have AMD compatibility. Both for importing Backbone and exporting the module. Would you accept a pull request?

Or use this.$ instead?