I have what I think is a pretty standard array/template relationship setup, but when I push a new item into the array I get the above mentioned Cannot call method 'destroy' of undefined error in the arrayWillChange method of the Ember source:
for (idx = start + removedCount - 1; idx >= start; idx--) {
childView = childViews[idx];
if (removingAll) { childView.removedFromDOM = true; }
childView.destroy(); <-- childView is undefined
}
I have never had this issue before. This doesn't happen when I remove an item from the array. Only on addition. Below is a link for a JSBin where I tried to duplicate the issue. The error doesn't get thrown but the template doesn't update either.
http://jsbin.com/asemul/2
EDIT:
You're calling array.push instead of array.pushObject -- the latter is an Ember.js method that is binding aware, which means it will automatically update bindings for you. The handlebars template helper {{#each filters}} is a binding to the filters array of the controller, and the template needs to know to update when the underlying array is updated. push doesn't tell the binding to update, but pushObject does.
Here's a working example (all I did was change push to pushObject): http://jsbin.com/asemul/6/
This is a pretty common mistake -- usually, I find that if my templates aren't synchronized with the underlying object, it's because something's wrong with the bindings, so that's where I start looking.
END EDIT
I don't think you should be setting removedFromDOM directly -- try using childView.remove() followed by destroy().
I'm not sure what the context is, but have you looked at ContainerView or CollectionView? Both of those views have support for arrays of child views and may accomplish what you're looking to do both more robustly and with less code.
Related
Zurb Foundation 6.5.3
I have an accordion menu which needs to be updated via ajax after the initial page load. So initially the menu contains 2 items, then $(document).foundation(); is called. Later after an ajax response is received elements are added (and potentially removed/replaced) within the menu.
I would like to be able to re-use the same elements however, I can't update the plugin to re-style the changed elements. I've tried:
$("#my-menu").foundation(); which doesn't work and shows the error:
Tried to initialize accordion-menu on an element that already has a Foundation plugin.
Foundation.reflow(menu, 'accordion'); which doesn't work.
menu.foundation('reflow'); which doesn't work and shows the error:
Uncaught ReferenceError: We're sorry, 'reflow' is not an available method for AccordionMenu.
I have made it work by destroying and removing the existing menu, re-creating the whole thing, then calling $("#my-menu").foundation(); however this isn't ideal in my opinion.
I found that my issue was due to no one solution working in all 3 cases:
foundation has not yet been initialised
foundation is initialised and the entire element has been replaced since
foundation is initialised and the element has been updated since
Unless someone has a better answer, I solved using this approach:
// this can happen before, or after code creates the menu
$(document).foundation();
console.log("foundation run");
__foundationRun = true;
...
function foundationUpdate(el) {
if (__foundationRun) {
if (el.data('zfPlugin'))
// already initialised, update it
Foundation.reInit(el);
else
// new element, initialise it
el.foundation();
}
// else leave for foundation initialise
}
....
// ... do updates (modify or replace entirely) and then:
foundationUpdate($("#my-menu"));
I'm using the pnotify error and success dialogs without any trouble, but the prompt dialog doesn't want to show. I get a Uncaught TypeError: Cannot read property 'addClass' of undefined error.
Has anybody been successful in getting this to work?
jsbin: pnotify with ember
Here is a working example: http://jsbin.com/fuqoke/1/
So what is the problem. Well, Ember uses prototype extensions. This polyfills ECMAScript 5 array methods in browsers that do not implement them, adds convenience methods and properties to built-in arrays, and makes array mutations observable. The problem is that pnotify expects to work with normal oldschool javascript arrays. For example this code snippet where it wants to loop over an array:
...
for (var i in options.buttons) {
btn = options.buttons[i];
...
This loop will also iterate over the methods added to arrays by Ember (e.g. addObjects, firstObject,....)
So 2 ways to solve this:
1) You modify the pnotify code, and contribute it ;), with a more robust implementation to loop arrays
...
for (var i = 0; i < options.buttons.length; i++) {
btn = options.buttons[i];
...
or
...
for (var i in options.buttons) {
if(options.buttons.hasOwnProperty(i)){
btn = options.buttons[i];
...
2) You disable Ember's prototype extensions, which I don't recommend. Here you can find more info:http://emberjs.com/guides/configuring-ember/disabling-prototype-extensions/ but it will get you in a lot of trouble.
To be short it is definitely a bug in pnotify.
I'm looping through an array using Ember.Array#lastObject property:
while (last = this.get('clickViews.lastObject')) {
// perform some actions to last
this.get('clickViews').removeObject(last);
}
When all objects from the clickViews array have been removed, this.get('clickViews.lastObject') still returns an object. Is there something wrong with how I'm getting 'lastObject' or removing objects from array?
Maybe you should do it this way. See here for a working jsbin.
while (this.get('clickViews.lastObject') !== undefined) {
// perform some actions to last
this.get('clickViews').removeObject(this.get('clickViews.lastObject'));
}
Hope it helps.
This seems to be a cacheing problem with multiple versions of emberjs loaded within the browser window context, as similar to the answer to this question: emberjs getEach method does not work as expected
I resolved problem by clearing browser history and rails precompiled tmp files.
I was trying to answer this question: emberjs: add routes after app initialize()
I started to play with Ember.Object.reopen(), to understand how it works, and perhaps finding a way of answering the previous question.
I feel a bit puzzled, and don't understand the behavior of this code:
jsfiddle: http://jsfiddle.net/Sly7/FpJwT/
<script type="text/x-handlebars">
<div>{{App.myObj.value}}</div>
<div>{{App.myObj2.value}}</div>
<div>{{App.myObj3.value}}</div>
</script>
App = Em.Application.create({});
App.MyObject = Em.Object.extend({value: 'initial'});
App.set('myObj', App.MyObject.create());
Em.run.later(function(){
App.get('myObj').reopen({
value: "reopenOnInstance"
}); // the template is not updated, 'initial' is still diplayed, but
console.log(App.get('myObj').get('value')); // print 'reopenOnInstance'
App.MyObject.reopen({
value: "reopenOnClass"
});
App.set('myObj2',App.MyObject.create()); // the template is updated and
console.log(App.get('myObj2').get('value')); //print 'reopenOnClass'
App.myObj3 = App.MyObject.create(); // the template is not updated but
console.log(App.myObj3.get('value')); // print 'reopenOnClass'
Em.run.later(function(){
App.get('myObj').set('value', "setWithSetter"); // the template is updated and
console.log(App.get('myObj').get('value')); // print 'setWithSetter'
App.get('myObj2').set('value', "setWithSetter"); // the template is updated and
console.log(App.get('myObj2').get('value')); // print 'setWithSetter'
App.myObj3.set('value', "setWithSetter"); // the template is not updated but
console.log(App.myObj3.get('value')); // print 'setWithSetter'
}, 2000);
},2000);
If someone can explain what is going on, particularly why the templates are sometimes not updated, sometimes updated, and also what's the difference between calling reopen on a class, calling it and on a instance.
Not 100% sure, but I will try and answer you questions.
First lets look at "myObj3". The ember getter/setter methods trigger the updates in the templates (they fire internal events which cause every property/observer to know something happened). Just setting a value by hand does update the value but will not fire these events and hence nothing changes in the UI. Kind of like when you use a Mutable list you use pushObject to make sure the UI updates.
Now lets look at your "reopen". When you reopen on the class it works as you would expect and updates the base class. When you reopen an instance it is actually creating a mixin and shims it on top of the object. This means when you do a "get" ember iterates over the mixin & object for the value to return. It finds that mixin and gets the value before the object; you could actually replace the method with a "return 'foo '+this._super()" on the instance you will get 'foo initial' (think of your object has having layers like an onion). If you have a group of mixin on top of your object you will have a hard time finding the correct value if you set something directly (but "get" will work perfectly). This leads to the general rule that you should always use "set" instead of a direct reference.
Side note: You can call "getPath" instead of "get" and you can use the relative or absolute path. Such as App.getPath('myObj2.value') which will make the code a little easier to manage. Goes for "setPath" also.
Lastly: The last value prints because you did change the value (it is in there) but the trigger for ember to update the ui never fired because you never called set on "myObj3" object.
EDIT: In the lastest version of ember it looks like the reopen on an instance does do a merge-down on the object (if that key already exists). The mixin only will wrap if you are adding new content.
I'm using the Chromium port of WebKit on Windows and I'm trying to retrieve a list of all of the images in my document. I figured the best way to do this was to implement WebKit::WebFrameClient::didFinishLoading like so:
WebNodeList list = document->getElementsByTagName(L"img");
for (size_t i = 0; i < list.length(); ++i) {
// Manipulate images here...
}
However, when this delegate fires, list.length() returns 0. The only times I've seen it return a list of non-zero length is when I substitute "body" or "head" for "img". Strangely enough, if I call getElementsByTagName(L"img") outside of the delegate, it works correctly.
I'm guessing that the DOM isn't fully loaded when didFinishLoading is called, but that would seem to contradict the delegate's name. Does anyone know what I may be missing here?
It turns out that the mistake was purely on my side. I was caching a pointer to the DOM document in my frame wrapper. Of course, since a frame can outlive a DOM document, I ended up referencing an out-of-date document once I loaded a new page.