I am trying to show some surfaces in Grid using Meteor and Famo.us without any success. After I run the project locally, the browser shows a blank screen. For reference, I am looking at this example: https://famous-views.meteor.com/views/GridLayout
HTML
<template name="gridTemplate">
{{#GridLayout size='[undefined,undefined]' dimension='[3,3]'}}
{{#famousEach items}}
{{>ContainerSurface template='gridItem' }}
{{/famousEach}}
{{/GridLayout}}
</template>
<template name="gridItem">
{{#Surface size='[undefined,undefined]'}}
<img src="/img/thumbnail.png">
{{/Surface}}
</template>
Javascript
FView.ready(function(require) {
FView.registerView('GridLayout', famous.views.GridLayout);
});
var items = [{
name:"adfadf"
},
{
name:"adfadf"
},
{
name:"adfadf"
},
{
name:"adfadf"
}];
Template.gridTemplate.helpers({
items:function()
{
return items;
}
});
I was having the same error, and now found out that unfortunately the current famous-views for meteor has been deprecated in favor of a new version, which works with the newly released famo.us 0.5. and surfaces no longer work.
You can visit https://github.com/gadicc/meteor-famous-views to learn more about it, but help with the current famous-views will be difficult now, since all discussion is basically for the new version.
Let me know what you come up with, so far I'm testing it myself.
Related
With Symfony UX, in order to assure that a custom chart could be rendered, I started with the sample from documentation. The rendered page is effectively blank. In the browser's console is this string:
<canvas data-controller="symfony--ux-chartjs--chart" data-symfony--ux-chartjs--chart-view-value="{"type":"line","data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"My First dataset","backgroundColor":"rgb(255, 99, 132)","borderColor":"rgb(255, 99, 132)","data":[0,10,5,2,20,30,45]}]},"options":{"scales":{"y":{"suggestedMin":0,"suggestedMax":10}}}}"></canvas>
I interpreted that string to mean that the rendering process got as far as chart.js. But what later step(s) could prevent the chart from being fully rendered? Earlier step(s)?
assets\controllers.json:
{
"controllers": {
"#symfony/ux-chartjs": {
"chart": {
"enabled": true,
"fetch": "eager"
}
}
},
"entrypoints": []
}
package.json includes:
"devDependencies": {
...
"#symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/assets",
...
"chart.js": "^3.4.1",
...
}
../node_modules/chart.js/dist/chart.js: Chart.js v3.9.1
Thankfully(?), there are no discussions of Chart.js at the Mozilla forums. Applying the principle of pressing buttons until things change, I learned that the ad blocker I use was preventing the chart from being rendered. Why That, Firefox?
I am writing a custom component that I would like to define other component dependencies.
The dependencies are different animations types.
Let's say they have the names "animation__x" and "animation__y"
x and y can be any name, so I am looking for something like animation__*
or /animation__\s*/
The only way I have made this work at the moment is either ensuring my component is placed after the animation components on the HTML or alternatively to force update components using this.el.updateComponents()
Neither of these solutions feels right to me.
AFRAME.registerComponent('cool-component', {
dependencies: ['animation'],
update: functions(data){
//detect available animations and do some stuff with them
let animations = Object.keys(components).filter((key) => {
return /(^animation__\w*)/.test(key);
});
//animations results in an empty array
}
});
html that is not working
<a-scene cool-component animation__x="" animation__y="" animation__z=""></a-scene>
html that is working (but its not good as I cant ensure my component is always last in the list
<a-scene animation__x="" animation__y="" animation__z="" cool-component></a-scene>
js that works, but doesnt feel write as I am using the entities internal functions
AFRAME.registerComponent('cool-component', {
dependencies: ['animation'],
update: functions(data){
this.el.updateComponents(); //<-- I DONT LIKE THIS BUT IT WORKS
//detect available animations and do some stuff with them
//now all animations are available as this.el.components
let animations = Object.keys(components).filter((key) => {
return /(^animation__\w*)/.test(key);
});
}
});
Three options:
Depend on the specific component names: dependencies: ['animation__xxx']
Make cool-component set those animations:
AFRAME.registerComponent('cool-component', {
init: functions(data){
this.el.setAttribute('animation__xxx', {...});
}
});
You can also defer cool-component logic until the entity has loaded and all the components have initialized:
init: function () {
this.el.addEvenListener(‘loaded’, this.doStuffAferComponentsLoad.bind(this));
}
More details in what cool-component is trying to accomplish will help to get a more precise answer.
I'm using the vue-cli 3 and want to generate background-image paths. Therefore I'm using the style data bind within an v-for-loop.
the component:
<template>
<ul>
<li v-for="(tool, index) in tools" :key="index">
</li>
</ul>
</template>
<script>
export default {
props: {
tools: Array,
}
}
</script>
The images are in this folder: src/assets/icons/xxx.svg
The problem is, that the generated image path seems to be incorrect but I can't find the mistake.
That's because webpack is not parsing any path inside the HTML(he's not that smart -yet-).
Anyway, you could trick webpack to get the URL for you. Doesn't look really like the best solution to me, but will answer your question.
Just create a computed property for a new list containing all the tools with their image paths. The trick is letting webpack parse the URL path for you in that object, then reference it in your HTML
Note: I supposed each item in the tools array is an unique string.
<template>
<ul>
<li v-for="tool in items" :key="tool.name">
</li>
</ul>
</template>
<script>
export default {
props: {
tools: Array,
},
computed: {
items () {
return this.tools.map(tool => {
return {
name: tool,
// the trick is letting webpack parse the URL path for you
img: require(`#/assets/icons/${tool}.svg`)
}
})
}
}
}
</script>
I recently migrated from protractor 1.8 to 2.0 (https://github.com/angular/protractor)
I have a problem with understanding how did the way .map works changed. Normally I would find elements and then map them like this:
locator.all(by.css('.whatever'))
.map(function(element){
return {
ele: element,
name: element.getText()
};
})
.then(function(elements){
if (elements[x].name ==='sth') {
//do something on elements[x].ele
}
});
The problem is that in newest version of protractor .element is no longer a promise. So now when I run code like this not only does it not work, but protractor freezes without returning any stacktrace whatsoever.
How should I go around this problem (mapping a list of DOM elements) in newest version of protractor?
Thanks for Your help;)
I've gotten around this issue with something like the following.
locator.all(by.css('.whatever'))
.map(function(element){
return {
click: function () {
element.click();
},
name: element.getText()
};
})
.then(function(elements){
if (elements[x].name ==='sth') {
elements[x].click();
}
});
Has somebody found a good way to animate state transitions?
The router immediately removes the view from the DOM. The problem with that is that I can't defer that until the end of the animation. Note: I'm using v1.0.0-pre.4.
Billy's Billing just released an Ember module that supports animated transitions.
I'll expand on Lesyk's answer. If you need to apply it to multiple views in a DRY way, you can create a customization class like this:
App.CrossfadeView = {
didInsertElement: function(){
//called on creation
this.$().hide().fadeIn(400);
},
willDestroyElement: function(){
//called on destruction
this.$().slideDown(250);
}
};
And then in your code you apply it on your various view classes. As Ember depends on jQuery you can use pretty much any jQuery animation.
App.IndexView = Ember.View.extend(App.CrossfadeView);
App.PostView = Ember.View.extend(App.CrossfadeView);
I know this is pretty old, but the best solution for this context-specific animation today is probably ember liquid fire.
It allows you to do things like this in a transition file:
export default function(){
this.transition(
this.fromRoute('people.index'),
this.toRoute('people.detail'),
this.use('toLeft'),
this.reverse('toRight')
);
};
Ran into this same requirement on my app. Tried Ember Animated Outlet, but didn't give the granularity I needed (element specific animations).
The solution that worked for me was as follows --
Change linkTo to be an action
{{#linkTo "todos"}}<button>Todos</button>{{/linkTo}}
Becomes...
<a href="#/todos" {{action "goToTodos"}}><button>Todos</button></a>
Create Method for goToTodos in current controller
App.IndexController = Ember.Controller.extend({
goToTodos: function(){
// Get Current 'this' (for lack of a better solution, as it's late)
var holdThis = this;
// Do Element Specific Animation Here
$('#something').hide(500, function(){
// Transition to New Template
holdThis.transitionToRoute('todos');
});
}
});
Finally -- To animate in elements on the Todos Template, use didInsertElement on the view
App.TodosView = Ember.View.extend({
didInsertElement: function(){
// Hide Everything
this.$().hide();
// Do Element Specific Animations Here
$('#something_else').fadeIn(500);
}
});
So far, this is the most elegant solution I've found for element specific animations on transition. If there is anything better, would love to hear!
I've found another drop-in solution that implements animations in Views: ember-animate
Example:
App.ExampleView = Ember.View.extend({
willAnimateIn : function () {
this.$().css("opacity", 0);
},
animateIn : function (done) {
this.$().fadeTo(500, 1, done);
},
animateOut : function (done) {
this.$().fadeTo(500, 0, done);
}
}
Demo: author's personal website
App.SomeView = Ember.View.extend({
didInsertElement: function(){
//called on creation
this.$().hide().fadeIn(400);
},
willDestroyElement: function(){
//called on destruction
this.$().slideDown(250)
}
});