I have not been able to find any documentation for the select() function that I have seen used to identify binding templates in Windows 8 store apps, nor have I been able to find it defined in the WinJS base.js or ui.js files. It seems to work like a normal CSS selector to identify the itemTemplate:
<div id="listViewTemplate" data-win-control="WinJS.Binding.Template">
<h1 data-win-bind="textContent: firstName"></h1>
</div>
<div id="listViewDiv" data-win-control="WinJS.UI.ListView"
data-win-options="{itemTemplate: select('#listViewTemplate')}"> <==== HERE <====
</div>
When identifying a binding template by its id, the use of the select() function seems to be optional. However, if using its class name, select() seems to be required.
Where is the select() function documented or defined?
It's in base.js, line 2712, and ultimately calls querySelector (or querySelectorAll)
If you put a breakpoint at _evaluateObjectQueryExpression in base.js (around Line 6154) and step through, you'll get some insight as to how the value is parsed.
Related
I'm trying to create a standard user status widget for my Aurelia app, and I'm not sure what I'm doing wrong. As a starting point I followed the docs, but my results aren't what they tell me to expect and I'm not getting errors either in build nor in the browser.
Relevant files are as follows:
<!-- nav-bar.html -->
<template bindable='router'>
<require from="./user-status "></require>
<!-- various nav buttons -->
<p class="navbar-collapse collapse navbar-text">
Test <user-status></user-status>
</p>
user-status.html
<template>
${status}
</template>
user-status.js
export default class UserStatusCustomElement {
constructor() {
this.status = 'Be sure to drink your Ovaltine!';
}
}
if I change the require in nav-bar.html to look for ./user-status.html it appears to have an effect (additional aurelia-looking attributes are added to the user-status element in the rendered html) but does not render the message (one assumes b/c it's not picking up the class and rendering as an html-only thing). If I leave as-is, it doesn't error but those attributes are not added and nothing is rendered, even static text.
I played around with your code and found that removing default from the user-status.js module fixed the problem. I suspect the reason has something to do with how Aurelia utilizes module-loaders (System.js, webpack, ...) when importing modules. Unfortunately I don't know enough about the internals of Aurelia to give a more in-depth answer.
I have found content selectors don't seem to work when an if binding is used on a parent element. For example:
some-element.html
<template>
<div if.bind="true">
This will appear
<content></content>
</div>
</template>
app.html
<template>
<some-element>This will not appear</some-element>
</template>
This works fine if I don't use the if binding, but will not render <content> when I do use the if binding. Is there something I'm doing wrong here or is there a way to get this to work as expected?
I'll be adding this to our documentation soon, but for now, here is #EisenbergEffect's explanation from https://github.com/aurelia/framework/issues/375
"No. That is a characteristic of the shadow dom. The content selection points have to be static. They cannot be added ore removed dynamically. If you want to hid them, then consider using show.bind instead."
I am using Jqote2 for my project. whenever i try to call a particular lambda by $.jqote , it is saying "ReferenceError: JQOTE2_TMPL_EXEC_ERROR is not defined"
the template corresponding to the lambda is sound and the parameters that i am passing to the lambda are logically and syntactically correct. and i am doing sync ajax call while loading the template therefore no chance of template not loading.
the template i am using is
<div class="facet"><h4><%=decodeURI(this.attributes.label)%></h4>
<%if("true"===decodeURI(this.attributes.autoExpand)){%>
<ul style="display:block">
<%}else{%>
<ul style="display:none">
<%}%>
<%=window.createonline.service.FacetService.buildFacet(this.item)%>
</ul></div>
I tried moving the elements around,in vain.
What may be the error?
Plz help!!!
Seems like this has no answers.
and now,the specs to my project has changed,and this is no longer required.
I'm working on a Meteor app that gets data from Facebook & I would like to use jquery-layout for presentation. I suspected that there might be some "subtleties" when trying to use jquery to modify HTML in reactive templates, so I set up a relatively simple test case that goes something like this (paraphrased for brevity)...
<body>
{{> mainTemplate}}
</body>
<template name="mainTemplate">
{{#with userInfo}}
{{> partialNorth}}
{{> partialWest}}
{{> partialCenter}}
{{> partialEast}}
{{/with}}
{{layItOut}}
</template>
Template.mainTemplate.userInfo returns contents of a Session variable that starts with a default value and asynchronously get updated with info from Facebook.
Template.mainTemplate.layItOut sets up a call to Meteor.defer with a callback fcn that actually executes the 5 lines of jquery-layout code.
And that seems to work pretty well...
the initial display is as expected/intended (although there's a brief period where the page is not laid out)
any updates to the reactive context cause re-execution of the layout (again, w/brief-but-visible re-layout)
So, why am I whining? Mostly I would like to find a cleaner approach that does away with the noticeable re-layout activity.
I could make the reactive contexts more granular, but I'm not sure that this would really help.
Alternatively, I suppose I could experiment with directly controlling rendering (e.g., via Meteor.ui.render() , but that sounds like a lot of work ;-)
I think what I'd really like is either
a) a way to hook into Meteor render events
or better still
b) a cleaner way to connect query-layout to templates
Thoughts?
So I managed to educate myself enough to answer my own question in case anyone else finds it useful. Bottom line is that I was wrong on several levels; making the reactive contexts more granular is the answer (or at least an answer).
In the example I gave, I made the whole page reactive by placing all of the rendering within the #each construct. What I now do is try to make the reactive contexts as small as possible so that only a (relatively) small part of the page is re-rendered on any reactive change and all of the reactive elements are contained below (or way below) the level of the jquery ui elements.
I.e., something like this:
<body>
{{> mainTemplate}}
</body>
<template name="mainTemplate">
{{#with userInfo}}
{{> partialNorth}}
{{> partialWest}}
...
{{/with}}
{{layItOut}}
</template>
<template name="partialNorth">
<div class="ui-layout-north"> <-- definition for jquery-layout north panel
<h1>This is the north pane</h1>
<p>The user data go next:</p><br />
{{> templateUserData}}
</div>
</template>
<template name="templateUserData">
<div>
{{#with theUserData}} <-- Assumes a helper function 'theUserData' for this template
<p>First name: {{first_name}}</p>
<p>Last name: {{last_name}}</p>
...
{{/with}}
</div>
</template>
Once you have the reactive elements below the jquery ui elements (I have tried it with panels, tabs, accordions, buttons and pop-ups so far) the whole thing works just like it said it would in the shiny brochure! ;-)
I'm trying to change the tag of the Errors decorator, currently it's:
<ul class="errors">
<li>error message</li>
</ul>
I'd like to remove the <ul> wrapper and change the <li> by ie <p>.
I tried a lot of things, but can't get it to work..
Any ideas?
You can't change the default tags of the Errors decorators because it calls the default views helper Zend_View_Helper_FormErrors and you've no way to pass paramaters.
So you'll to write your own Decorator & View Helper.
I did something similar to wrap errors into <label> elements
I created LabelledErrors decorator which calls a FormLabelledErrors helper and reset the default decorators, replacing the Errors decorator by my own.