I am using a view to bind data to a contentEditable div using the code found in the answer to this question: Ember and HTML5 contenteditable property
I have a property a.b.c that I'm binding it to like so:
{{view App.ContenteditableView valueBinding="a.b.c"}}
This correctly updates a.b.c when I type in it, and it updates itself when I modify a.b.c. However, It does not update when I change a to a different object. That is, the text box needs to update when a or b changes, not just when c changes.
How is this done?
Ember already supports this if you properly use the built in setters.
if a extends Ember.Object a.set('b', { c: 'asdf'}) if a is a POJO Ember.set(a, 'b', { c: 'asdf'}).
Additionally using valueBinding isn't necessary, you can just write value=a.b.c
In the provided example I set the text box to a.b.c
App.IndexRoute = Ember.Route.extend({
model: function() {
return {
a:{
b:{
c:'dog'
}
}
};
},
actions:{
change: function(){
Em.set(this.currentModel, 'a', {b:{c:'fdasdf'}});
}
}
});
Example: http://emberjs.jsbin.com/toticame/1/edit
Related
I am using [ngClass] to choose css class based on material table row value. On mouse over event I am changing flag value which fetching cssclass and which is working fine. But when I am debugging it I realize that it creates background thread and chrome continuously checking getIconCssClass in background which might create performance issue. How to resolve it?
HTML
<mat-icon [ngClass]="getIconCssClass(element)" mouseOver="mouseOverCss(element)" mouseOutCss(element) ></mat-icon>
.ts
getIconCssClass(element: Object){
if(element.void && !element.mouseOver){
return 'void-icon-normal-css';
} else if(element.v)
return 'void-icon-mouseover-css';
}
mouseOverCss(element)
{
element.mouseOver = true;
}
mouseOutCss(element)
{
element.mouseOver = false;
}
I just remove method from [ngClass] and added property in object element. Default cssClass added based on condition before rendering mat table.
HTML
<mat-icon [ngClass]="element.cssClass" mouseOver="mouseOverCss(element)" mouseOutCss(element) ></mat-icon>
Just changing cssclass on mouse over and out event instead of changing any flag.
.TS
mouseOverCss(element)
{
element.cssClass= 'void-icon-mouseover-css';
}
mouseOutCss(element)
{
element.mouseOver = 'void-icon-normal-css';
}
After some work around I found that when we use any flag in condition of [ngClass] method than angular create background process to continuous checking to method. we should always avoid boolean flag like mouseOver which is being changed in mouseOverCss method or avoid method itself to improve performance.
I created a Web Component class to extend div, and used customElements.define() to define it:
class Resize_Div extends HTMLDivElement {
constructor(){
super();
this.cpos = [0,0];
<etc.>
}
connectedCallback() {
console.log( 'connected' );
}
<etc.>
}
customElements.define('resize-div', Resize_Div, { extends:'div'} );
If I test in html, as <div is:'resize-div'> </div>, it works fine.
Now I want to use createElement to create an instance programmatically, using the options to declare the is, as documented here:
let dv = document.createElement('ul', { is: 'resize-div' })
The browser developer tools show it created, with outerHTML as below:
outerHTML: "<div is="resize-div"></div>"
As documented, "The new element [has] an is attribute whose value is the custom element's tag name."
Now I set id, class, and style, and attach the new element to the DOM via:
document.getElementById( parent ).appendChild( dv );
Now look at it again: the is attribute is stripped off and it doesn't function as a Web Component:
attributes: NamedNodeMap
0: id
1: class
2: style
length: 3
The docs for the deprecated registerElement here show an example using document.body.appendChild( new myTag() ), but that's obsolete.
So what is the correct way to create a Web Component programmatically and attach it to a document?
(ps. I'm working on Chromium Version 70.0.3538.67 (Official Build) Built on Ubuntu, running on Ubuntu 16.04 (64-bit)
You've defined an extended <div> but you try to create a <ul> element.
If you create a <div> instead it will work:
let dv = document.createElement('div', { is: 'resize-div' })
The new syntax also works:
document.body.appendChild( new Resize_Div )
NB: When you create an customized built-in element programmatically the is attribute is not added in the HTML code but it still acts as a custom element, and outerHTML will return the HTML with is correctly populated as explained in the specs.
You can also create the element without this {is: 'tag'} object. May or may not be useful in some situations.
class MyElement extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({
mode: 'open'
})
shadow.append(Object.assign(
document.createElement('h1'), {
textContent: 'Impossibru!'
},
))
}
}
customElements.define('my-custom-element', MyElement)
const el = document.createElement('my-custom-element')
document.body.append(el)
I am trying to add CSS when clicked on row or column of table, Following is code
private rowClicked(event: Event): void {
event.srcElement.setAttribute("class", "highlighted");
}
But it's not working as accepted. Am I doing in wrong way, Is there any alternate way to add CSS dynamically?
Note-
Is there any way to add CSS using dom element, my table has thousands of data and to create this table, I have used MetaWidget.
The easiest way to your problem is to assign a unique ID to each included element together with employing another variable to hold selected ID. The logic to turn on my-class CSS class will now be based on the selected ID.
Your new HTML template:
<div (click)="rowClicked(1);" [ngClass]="{'my-class': highlightedDiv === 1}">
> I'm a div that gets styled on click
</div>
Your rowClicked function:
highlightedDiv: number;
rowClicked(newValue: number) {
if (this.highlightedDiv === newValue) {
this.highlightedDiv = 0;
}
else {
this.highlightedDiv = newValue;
}
}
A working demo is here.
More can be found here.
You are using MetaWidget, but you are not mentioning what version you are using.
If you want work with Angular2 and MetaWidget, you should have use a compatible version of MetaWidget, which can be found here-
https://github.com/AmitsBizruntime/MetawidetA2
Using this library will be the best solution for you.
Re-
Angular does not work based on DOM, it works based on Component.
If you like to work on DOM, then you should include jQuery in tour angular project from here-
How to use jQuery with Angular2?
But it is not a good practice.
I'm new to protractor and I want to check some css properties. I'm doing it like this (CoffeeScript):
element.all(By.css(".my-picture")).then (pictures) ->
for picture in pictures
picture.getCssValue("border-radius").then (value) ->
console.log value
The above code does not print anything. I can get properties like "display" or "color", but no "border-radius".
According to this documentation, it seems that getCssValue just works with CSS2 specification. And according to CSS2Properties doc, border-radius does not exists!
Now, I realize that border-radius is a CSS3 property. But the question remains, how can I test it using protractor?
element.all(by.css('.my-picture')).then(function (pictures) {
for (picture in pictures) {
browser.executeScript(function (domPicture) {
var style = window.getComputedStyle(domPicture);
return style.getPropertyValue('border-radius');
}, picture.getWebElement()).then(function (borderRadius) {
console.log(borderRadius);
});
}
});
How to add, remove and change css classes for an ember element based on the value from the contentBinding while doing ember each?
Doing something like below in didInsertElement, but by the time have added the css classes, based on content value from controller, view element is attached to the view and hence css doesn't get applied.
Is there any other way that we could perform this while view element is getting rendered?
didInsertElement: function() {
this._super();
var personStr= this.get("content").person;
if(personStr==1){
this.$("img").addClass("add-person");
this.$("img").removeClass("view-person");
this.$("img").removeClass("edit-person");
}
}
You could use a Ember.CollectionView and specify your classes which depend on the content in classNameBindings. See API documentation, section HTML class Attribute.
See an example here http://jsfiddle.net/pangratz666/b4xGP/:
Ember.CollectionView.create({
content: [{name: 'Brunö'}, {name: 'Alfred'}, {name: 'Hansi'}],
itemViewClass: Ember.View.extend({
templateName: 'item',
classNameBindings: 'beginsWithA'.w(),
beginsWithA: function() {
var name = this.getPath('content.name');
if (!Ember.empty(name)) {
return name.indexOf('A') === 0;
}
}.property('content.name')
})
}).append();