Set up:
Index.html
-- custom-obj1.html
-- custom-obj2.html
I have my index.html with an iron-page with two items/pages
custom-obj1: Element that draws a few paper-card elements drawn with a iron-aja a source.
custom-obj2: Same as above but fetching data from ID from clicked element from custom-obj1.
What I'm not sure about here is how to write the event and where to store and read the ID from the first action. Can I data bind clicked id into my second custom element?
You should use a parent element so you can pipe them trough polymer data binding with a common property.
So your setup should look like this:
Index.html
-- parent-element (property: data)
-- custom-obj1 (property: data)
-- custom-obj2 (property: data)
So if you change anything in the data binding it will be synchronized trough the parent element.
More information to design apps and thinking in Polymer from Kevin Shaaf (Polymer Summit 2015): https://www.youtube.com/watch?v=ZDjiUmx51y8
Of corse you can listen the property-name-changed event if you add the notify: true to it's property and you can give that to anything, but I suggest to use the Polymer Data Binding system.
Related
I have applied ng-click on an element and within the function, I want to access the DOM element itself. I could do that with :
var element = $document[1].getElementById('<id of the element>');
However, the problem I am facing is that when that element is clicked, it's class changes. But the element I get using the above method is the previous state of the element before the click. How can I get access to the new attributes of an element after the click is performed ?
Update
I am using AngularJS' smart-table for displaying data fetched from backend. The library offers sort functionality but it sorts the data which is already fetched from the DB and is present in front end. I wanted to tweak it so that when I click the sort button, I should be fetching data from the backend and update the rowCollection so that the table refreshes. Now, in order to trigger the API call, I was thinking of using ng-click event on table headers. Also, I need to know whether I need to sort in ascending order or descending order. So, for that, smart-table automatically appends a class sort-ascent or sort-descent to the table header when it is clicked. So, I thought maybe if I can access that, then using the combination of the header column (sort key) and the class (sort order), I can hit the backend API and fetch the appropriate data.
I understand the solution looks more of a hack then a proper way of doing things.
Maybe you should look at this answer : Accessing clicked element in angularjs
You can access by $event.target
<button ng-click="yourSubmit($event)"></button>
I'd just like to understand the decisions behind Backbone.Marionette's view regarding UI elements.
When instantiating a Marionette.View on an existing DOM element, like this:
view = new Marionette.ItemView({
el: "#element",
ui : {
whatever : "#whatever"
}
});
I am able to access view.$el, the jquery selector inside view.initialize, so far so good.
However, when I try to access view.ui.whatever, I only have access to the selector, ie the string "#whatever" instead of the actual $("#whatever") jquery selector.
The reason for this is because Marionette.View.bindUIElements() is only called on render and not before initialize.
I would like to know if you think this behaviour is logic and why?
I am only asking in the case of attaching of the view to an existing el, if the view is created with a template, I do understand why the binding is in render().
Attaching a view to an existing element is the exception. The normal view lifecycle involves calling render, and without doing that there would be nothing for the UI elements to bind to.
Just call this.bindUIElements() in your initialize method when you need to attach a view to an existing element.
When I am working with Marionette, I put the code that has to access the ui elements inside the onShow method. This event is fired after the dom is ready and the elements are ready to be manipulated. Inside this method, your ui.whatever will now be pointing to an element and not a string.
I think you have that problem because you have to access to the jQuery element with
this.ui.whatever
Because "this" is already a view instance.
See: http://marionettejs.com/docs/v2.4.4/marionette.itemview.html#organizing-ui-elements
I'm playing with Backbone and am getting one model rendered 4 extra times in my list view.
I create and fetch the collection before calling history.start but I don't think that has to do with it.
I'm calling against an api that is only returning 2 models in json. The first model rendered shows up just once and the next shows 5 times in a row. This happens every time.
Here's my code.
https://gist.github.com/3843944
On line 66 you have this line:
#$("div").append(view.render().el)
That gets called each time you render a service provider. Due to the generic selector, div, I think it's selecting every div that exists in the element. When you add the first entry, the only div that exists is <div class='providers'>. However, when it's rendering the second entry it's selecting that div and all new div's created by the first service provider and appended to the template.
Try something like this:
#$el.append(view.render().el)
I have a Sencha tab panel, each tab loads html content via ajax. One of the components is a post/list that visitors can use to drill down once more to read the entire post.
My question is, can I somehow trigger a view switch through the html? Or should I be loading the post data via JSON, and styling a listpanel in Sencha?
Thank you!
You can add listeners to elements within your HTML which would then be able to trigger the view switch. For example,
// simple HTML snippet contained in Panel
<a class="my-link">Click Me!</a>
// on after load/after render (need to ensure that the elements exists in the page!)
// get reference to the containing panel (tab)
var panel = this.items.get(0);
panel.getEl().on({
tap: function(e){
console.log('i was clicked!');
},
delegate: 'a.my-link'
});
The delegate option allows you to pass a selector that means the event will only fire when an element matching that selector is in the event target's chain (i.e. returns something in an e.getTarget(delegate) call).
EDIT
You can access attributes of the tapped element using either the DOM node tapped or use Ext.fly to wrap an Ext.Element instance around it and use the helper methods.
console.log(e.getTarget('a.my-link')); // logs DOM node
console.log(Ext.fly(e.getTarget('a.my-link'))); // logs Ext.Element wrapping DOM node
console.log(e.getTarget('a.my-link').href); // logs href via DOM node property
console.log(Ext.fly(e.getTarget('a.my-link')).getAttribute('href')); // logs href via Ext.Element getAttribute() method
Depending on the nesting you may be able to remove the selector from the getTarget() call (i.e. if you're always tapping on the element your listening on then you can remove it, but if there are children in the element you're listening on then you will need it. In the second case the 'target' will be the child that the event bubbled from so the href etc will be wrong. If that makes sense... :) )
The solution for 2.2.1:
initialize: function() {
this.element.on({
tap: <function>,
delegate: <query_expression>
});
this.callParent(arguments);
}
<query_expression> can be anything fitting in to Ext.query() too.
So i'm working with the new Ext following MVC patterns by creating controllers which listen to view events to fire methods. I have a view with a tree loaded as an admin menu and I want to listen from the 'Users' controller when the tree item called 'List all users' is clicked so I can show the grid with all users. My logic says that I have to set an id to each tree element in order to make sure I'm listening to the right and only possible one...problem is, even though I send and id to my json on each element, it never gets assigned. The element ids still have the 'ext-gen1091' type of element ids.
Any idea how do I do about assigning a unique id to each of my tree elements?
My json looks like this:
{"expanded":"true","text":"Users","id":"users","children":[{"text":"List all users","id":"userslist"....
You don't need to use HTML ids to identify the record you are handling. ExtJS provides APIs that make it easy for you to handle operations, listen to events etc on the tree or other components.
Since, you already have id assigned to each node in the tree. You can use the same id to work upon when an action / event occurs. All you have to do is add appropriate event listener methods to the tree panel. For example if you are tracking click on a node you can make use of the itemclick. The methods parameters provide you access to all information you will need.
here is the skeleton code:
itemclick: function(Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e) {
// Access the record using record or you can access the HTML using item variable.
}
Similarly you can make use of other events and track user actions.