I created small component thats going through all select elements and creating unordered lists from it so that i can style it easily. Everything works just like i wanted. Here is the script:
https://github.com/goranefbl/softdrop
You fire it like this:
SoftDrop.init({
selector:'input_select',
mobile:true
});
and its looping through every "input_select" element and creating new nodes for it. But that is all one single object, and i dont have a way to access for example specific select element, if i want to push an item to it, or to close it with some public method.
For every element, i am adding data-softdrop="i" to it, so this way i could easily target it with:
document.querySelectorAll("[data-softdrop='i']")
and it works. But if i want to do this from within component, something like this:
var selects = SoftDrop.init({
selector:'input_select',
mobile:true
});
selects.data('something').open();
How would i go with doing this? I would create some array of objects at the top and during forEach call, push it there, then access it how ? To be able to have public methods on specific select elements.
Thanks
One way to achieve this would be to create a data object inside your component and add each entry as property to this object, e.g. like this:
data['something'] = myElement;
Then, later, you could access the element again and invoke methods on it, e.g.
data['something'].open();
Is that what you have in mind?
Related
I am using WebDriverIO to try to access (ie. getText, getAttribute, click, etc) an element after creating a list of elements. I am easily able to implement this element if I am using the browser.element() method, but the moment I use browser.elements(), I cannot access the individual objects in the array. According to the WebDriverIO docs, I should be able to access them using the value property.
Here is my pseudo-code. I assumed that these two functions should return the same thing:
usingElement() {
return browser.element('.someCss');
}
usingElements() {
return browser.elements('.someCss').value[0];
}
When I try to use the first block of code, it works perfectly fine.. but
when I try to use the second block, it gives me an error saying usingElements.click is not a function or usingElements.getText is not a function, etc.
How can I isolate a single element object after using the browser.elements() method?
I guess you might need to use one of the below two ways:
Way 1:
var elmnts = browser.elements('.someCss');
var element = elmnts.value[0].ELEMENT;
browser.elementIdClick(element);
Way 2:
var element = $$('.someCss')[0];
element.click();
Thanks,
Naveen
Your index reference was placed in the wrong spot. Try:
var myElement = browser.elements('.someCss')[0];
myElement.click();
You don't need to reference the value property, as WebdriverIO is smart enough to infer that for you.
I am searching a solution where I can replace a object content with other in a array of objects.
The thing is, I don't know what my function will pass, so I can't pass the values inside as keys directly, so the reference won't be copied, is there any way I can assign the value directly without passing the reference? I know that objects pass references and not values, but is there a way to do that?
I tried two ways:
state.document["atributes"].splice(state.document["atributes"][state.currentIndex],1,section);
And
state.document["atributes"][state.currentIndex] = section
Where my state.document["atributs"] is my array, and the state.currentIndex the index where I want to replace the element inside my array.
What happens at the moment is that my object can be a Table a paragraph etc.
If the objects are the same it replaces the content :/
Any help with this? Thank you
If you're only modify what in the currentIndex, try
Vue.set(state.document["atributes"], state.currentIndex, section)
Reference: Vue documentation
I've to put two ko.applyBindings(); in the same function but the system turn me back a run-time error.
Is it possible to do that?
Usually, you create a viewModel object and then call ko.applyBindings(viewModel) once, like this:
var viewModel = {
personName: ko.observable('Bob'),
personAge: ko.observable(123)
};
ko.applyBindings(myViewModel);
Maybe this is what you're looking?
Optionally, you can pass a second parameter to define which part of the document you want to search for data-bind attributes. For example, ko.applyBindings(myViewModel, document.getElementById('someElementId')). This restricts the activation to the element with ID someElementId and its descendants, which is useful if you want to have multiple view models and associate each with a different region of the page.
From the documentation here.
As for your comment about managing a list and an array, I'm not sure what you mean. They sound like the same thing to me. Knockout has observable arrays that you can use.
I am creating a JavaScript class that represents a data-bound table, using jQuery to handle DOM manipulation. The class has a $table.$body.$rows property where I am keeping a collection of the table's jQuery-wrapped rows to avoid performing a $table.$body.children('tr') call whenever a row is added or removed. When a row enters or leaves edit mode, I need to be able to add and remove objects from that $table.$body.$rows property, which I accomplish with jQuery's .add() and .not() methods.
These methods are inadequate, however, when the row being edited is not at the very end of the table, since the .add() method adds the new item to the end of the internal collection maintained in the jQuery instance. In order to make sure the $table.$body.$rows collection is correctly ordered, I need to be able to insert the new item at a specified index within the jQuery collection. Does such a method already exist, or am I going to have to write it myself?
I could just let the HTMLTableSectionElement.rows property keep track of the rows for me and simply wrap a particular row in an jQuery object when necessary, but this seems inefficient. This raises a secondary question: how expensive is a call like .children('tr') anyway, and would I be better off simply reassigning $table.$body.$rows each time a row is added or removed?
Technically, jQuery do add splice() to jQuery.fn, but it isn't documented. They almost removed it from the public interface recently, but decided against it;
We want to avoid the appearance that using these methods [jQuery.fn.{push,sort,splice}] is encouraged, but we don't want to remove them either.
... make of that what you will.
You could use Array.prototype.splice.call, e.g.:
Array.prototype.splice.call($table.$body.$rows, 3, 0, newItem);
... and I can't see how that'd be wrong.
Although in all honesty, I think you're trying to solve a problem that doesn't exist.
I could just let the HTMLTableSectionElement.rows property keep track of the rows for me and simply wrap a particular row in an jQuery object when necessary
... I'd do this. Calling .children('tr'), and updating $table.$body.$rows when rows are modified is not going to kill your application.
You could the splice function on the native array object.
arr.splice(index, 0, item); will insert item into arr at the specified index.
I create an object in my javascript function, and I'd want to retrieve it in c++ from dom class for change some values, but I can access only by id, tag or class that are part of css syntax. Is there the possibility to get my object and set values or send to him those value?
First of all I think you should always get DOM elements by id or class name because IMHO it's the most versatile way to get things from this kind of tree.
Anyway, just like any other DOM Minko provides the childNodes and parentNode properties if you want/have to browse the tree :
AbstractDOM::childNodes()
AbstractDOM::parentNode()
When you've found the right DOM element, you can then use the other DOM methods to get its content, set its value, etc... Everything you need should be in the AbstractDOM base class definition.