I am trying to use Angular2 to build a WiX component.
I added the WiX custom attribute wix-options to a span, using Angular's syntax to allow binding (note the {{'email' | translate}}):
<span wix-ctrl="Input" attr.wix-options="{placeholder: {{'email' | translate}}, size: 'big'}"></span>
When I single-step the JavaScript code in Chrome, the attribute does not appear on the element:
The wix-ctrl attribute, which was not prefixed with attr. to allow binding, continues to appear.
How can I make Angular2 preserve the wix-options attribute in the DOM? The WiX UI library searches for the elements tagged with wix-ctrl and then reads the wix-options to get more information.
You may want to try doing that the directive way:
<span wix-ctrl="Input" [attr.wix-options]="{placeholder: {{'email' | translate}}, size: 'big'}"></span>
Otherwise you'd have to do it something like:
<span wix-ctrl="Input" attr.wix-options="{{ {placeholder: {{'email' | translate}}, size: 'big'} }}"></span>
Since you are passing in an object, Angular isn't aware that it should parse the whole thing or not. You're probably getting an error in Dev Tools, too.
Related
I use goog.html.sanitizer.HtmlSanitizer.Builder to create safe HTML that I then dynamically insert into a dialog. I wanted to have an input field that uses the Html 5 "placeholder" attribute.
I tried
.alsoAllowTagsPrivateDoNotAccessOrElse ([ "placeholder"])
and got an expected nasty compiler error!
I ended up adding the place holder attribute to the closure-library attribute white list javascript code. The call to alsoAllowTagsPrivateDoNotAccessOrElse was removed and all worked well.
I'm trying to bind the background-img: url('') property in a WinJS application.
I've got a view model property which is set to something dynamic like:
'images/' + myObject.name + '.jpg'
But I'm unsure how to use data-win-bind to set said property to the css property background-img: url(''); correctly.
My template is currently set like this:
<div class="item" data-win-bind="style.backgroundImage: backgroundImageUrl">
Where backgroundImageUrl is my view model property, but this does not seem to setting things correctly.
Any ideas as to how to bind to these properties?
Your data-win-bind syntax looks correct. So there could be two possibilities.
First, make sure you've called WinJS.Binding.processAll. That's necessary to set the binding context and set up the bindings described by data-win-bind attributes. Nothing happens without it.
Second, the value of the source's backgroundImageUrl must be a string in the form that CSS expects, that is, "url('')". It can't just be the relative path itself, like you would use with an img.src target.
To do this, either make the source's property in that form, or use a binding initializer/converter to add the url('') part automatically. For more on that, I suggest looking at Chapter 6 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, with the general data-binding discussion starting on page 299 and the initializer stuff starting on page 315.
I have a template that has a some text updated reactively once every second.
I also have a button, that when clicked, gets it's style changed to display a disabled button - this works fine but as soon as the template re-renders due to the condition above then the button reverts back to it's original style. It is almost as if the entire template is rendering from scratch (template.render is fired every second).
Is this normal? do I need to control the style via a reactive {{btnstyle}} type mechanism?
Yes, the typical way to do this is to set the style via a class that is set by a template helper function. For disabling button/input elements, you can just use the disabled attribute instead of class:
<button type="button" {{#if buttonDisabled}}disabled{{/if}}>Button Text</button>
or
<input type="button" value="Button Text" {{#if buttonDisabled}}disabled{{/if}} />
and then do:
Template.yourFormTemplate.buttonDisabled = function() {
// return true or false depending on if the button should be disabled
};
The problem is that when Meteor re-renders your template, the element which you set the style of is actually getting replaced with a new one. Note that the Meteor team is currently working on a new templating engine that works on a more fine-grained level, so that elements don't necessarily get replaced like that. You can try your current code with the preview release of the new templating engine with this command:
meteor --release shark-1-29-2014-e
or
mrt --release shark-1-29-2014-e
However, it is still generally recommended to style elements via the class attribute, set with a template helper. This is a more declarative, template-driven approach that just fits better with the "Meteor way" to do things, rather than the imperative approach of setting the style directly from your JavaScript. It also helps with separating concerns, by allowing your CSS to control the actual style.
I'm very new to Seam and am just getting used to the different components available. I'm wondering which one I should use for this situation.
The answer to this question explains the difference between <h:outputLink> and <h:commandLink>, that <h:outputLink> produces just a basic HTML link tag with GET request and <h:commandLink> submits a POST via a click event.
I just want to attach a simple jQuery click event to a link. I don't want the link to redirect to anywhere or submit a form. I basically want the equivalent of href="#" (I understand that commandLink generates href="#" but it seems heavy-handed for a simple link with no form submission). But <h:outputLink> implicitly adds an href value unless I put value="#" (which seems hacky).
What component do I want to use here? I seem to be missing some very basic element.
(First: <h:outputLink> and <h:commandLink> are standard JSF components, not part of the Seam framework.) In this case, you can just use the standard HTML tag <a>, because you appear not to be using anything special to JSF.
I'm looking to get ideas on how to not change at all the code used to create css tabs (so that I can place it into an include file to avoid duplicating the code across all files that use it), but my current implementation doesn't allow this because I need to select the active tab using id="selectedTab".
The only implementation I found so far that solves this is the following one:
http://unraveled.com/publications/css_tabs/
It requires assigning a class to each tab and uses the body id to determine the active tab.
Is this the only way or is there any other alternatives?
My current code looks like this (the id=noajax" is used to avoid using ajax to load certain pages):
<div class="productTabsBlock2">
<a id="selectedTab" href="/link1" >OVERVIEW</a>
SCREENSHOTS
<a id="noajax" href="/link3" >SPEED TESTS</a>
<a href="/link4" >AWARDS</a>
</div>
EDIT: asp is available as server side and is already used on these pages.
If you're looking for a non-JS solution, then the body class/id provide the easiest way to do what you want.
If you have access to JS library, you can easily add "selected" class to any of the <a> element and modify its appearance.
Just in case you haven't notice, you can use more than one class definition in an element. For example, <a class="noajax selected" /> is valid and both CSS selectors .noajax and .selected will be applied to the element.
An include file for what? If it's a server side programming language like PHP, you can pass a parameter for the selected tab through various methods.
you could use jQuery to add the `selectedTab' id (or class) like so
$('.productTabsBlock2 a').mouseover(function () {
$(this).addClass('selectedTab');
});