Please Bring YouTube Tutorials Back

[Angela_Burton]

I haven’t been to the YouTube channel in a while, and was surprised to visit it today and find all but two videos unavailable.

I understand that much of the tutorials are for older versions of Fuse and that Fuse has changed a lot since then.

However, I still found some of them helpful. I wanted to watch the long live stream that explained in detail how to use ES6 and avoid using Observables.

The last time I checked the docs (which truthfully was a while ago) the only part that was updated in this way was the hikr tutorial. Much of the docs were not up to date. They explained things the old way and used Observables in the sample code. Same with the Fuse Examples.

Because the docs were lagging behind, I really found the more recent vids very helpful. Have things changed much regarding the documentation?

If not, is there some way that we can have access to these vids again? I know that the YouTube channel has changed to focus on driving marketing to a different audience, but for us developers using Fuse Open, maybe the vids can be shared on a separate channel for us?

[aeq]

I’ll second that, @Anders_Lassen!

[aeq]

Oh hey @Angela_Burton, I found this “hidden” doc on FuseJS: https://fuseopen.com/docs/fusejs-beta/fusejs.html

[Samuel_Rizzon]

I agree and miss the old videos on youtube. They helped me a lot when I was starting to study Fuse.

[Angela_Burton]

Cool! Thanks, @aeq

[kusma]

The youtube-videos should be back online now, but they are unlisted.

[MVONDO_Yannick]

@kusma, who can we get them please

[Angela_Burton]

Thank you so much!

As @MVONDO_Yannick said, we don’t know how to get to them. There are a few links scattered throughout the docs, but we’d have to comb through the docs to find them.

Would it be possible to post the links to the unlisted tutorials somewhere, or maybe post one link to a playlist that includes them all?

[kusma]

The youtube-playlist that can be found on http://fuseopen.com/docs/ has now been restored:

Thanks for pointing this out, and thanks to the people at Fusetools for following up on this!

[mvondoyannick]

Hi, here a playlist of YouTube FuseTools videos.

https://www.youtube.com/playlist?list=PL_6WmYF-2HLlBCTYZIfVsNMY0hquPMUe6

[forza]

Hallo have watched fuse 's videos on youtube about the Reusable Components(https://www.youtube.com/watch?v=-jk3jNQzE4U[1] ) and i’m trying to do the same. Since i have put the JavaScript part in another file, i’m trying to separate the variables and functions from the module.exports but i did not succeed and i’m having errors. As you can see on the uploaded file, the original Script is on the left and mine on the right side. Please can explain the code from options till return selected.value=== option? and look if what i tried on the right side is good??

[Angela_Burton]

Hi @forza,

In my case, I was interested in the YT tutorials to learn ES6 for Fuse so that I could avoid using Observables. So I don’t use them, but I will try and help you.

First off, you have a typo in your clicked function - instead of value you have valeu. It should read:

isOpen.value = false;

You are also missing a semi-colon in your toggleOpen() function. It should read:

isOpen.value = !isOpen.value;

Currently, your code exports options “as-is”, which is an array of strings. This means that your UX markup will only have access to an array of strings - not very useful.

The tutorial exports options in a way that maps a function to the options array and iterates over each item. It returns more than just the array, making it way more useful.

options: options.map(function(option){ //map to options array and refer to each item (i.e. the currentValue) as option
  return{
    title: option, // each title will return each option, which you can use to label your buttons, populate droplist, etc.
    isSelected: Observable(function(){
      return selected.value === option; // set the value of `selected` to whichever value `isSelected` is `true`
    }),

By creating separate “handles” from the options array, you can treat them separately in your UX markup. Title can be used to populate the value for each Panel in the Each.Items collection.

Conversely, when IsSelected becomes true for a Panel item, the value of selected (which is an Observable) will be updated to that panel’s value. Since the Panel items were populated with the title value, selected will be set to the respective title value.

Setting the value in this way allows UI changes like user selection to communicate to the business logic of your application. Now if you wanted to, you could do something with the selected value, such as run a query, generate a greeting, etc.

To learn more about IsSelected, see IsSelectedFunction Class in the documentation.

(BTW, IsSelected is Pascal Case in the docs but Camel Case in the example. It seems to work either way…)

Click here to watch Anders explain his export scripting in the YouTube tutorial.

Read more about Array.prototype.map() in the official Mozilla JavaScript documentation here.

Map is nice because it’s an immutable way to run a function on a value or an array of values.

Hope this helps!

PS - “Ananas” in English is “Pineapple”

[forza]

Thanks @Angela_Burton for your answer, I followed the links and i understood more but i still have the problem with the concatenation of the two functions. It’s possible to separate those functions?

[Angela_Burton]

Hi @forza, can you please post the code that you’re having a problem with and I’ll take a look?

[forza]

the code i’m tooking about it’s the code at the top left side . With your explanation, i understood how the code is functioning. What i will like to do, is to write the same code in another way so that all functions are outside the module.exports. I want to write just the name of the variables and functions in module.exports like i did with the toggleOpen:function at the right side. so i want to do the same thing with the two functions you highlighted.

[Angela_Burton]

Hi, @forza.

If you only want to remove functions from the module.exports object, then it can work.

I would do something like this:

var Observable = require("FuseJS/Observable");

var fruits = Observable("Tomatoes", "Bananas", "Mangoes", "Pineapples");
var selected = Observable("Pineapples");
var isOpen = Observable(true);
var options = fruits.map(function(option) {
	return {
		title: option,
		isSelected: Observable(function() {
			return selected.value === option;
		}),
		clicked: function() {
			selected.value = option;
		}
	};
});

function toggleOpen() {
	isOpen.value = !isOpen.value;
};

module.exports = {
	selected: selected,
	isOpen: isOpen,
	options: options,
	toggleOpen: toggleOpen
};

I don’t know how to make it work by separating the clicked, title, and isSelected returns into separate functions, and I don’t even know if that’s possible.

The return value of these are all linked to the same instance of map.

In essence, option represents the currentValue of map which is passed to each returned value:

title: option,
isSelected: Observable(function() {
    return selected.value === option;
}),
clicked: function() {
    selected.value = option;
}

I think it works in the ux markup like this:

Each Items is assigned options.

The JS engine will data-bind each option to each item (see Each Class in docs for more info).

When an item panel is clicked, it will update the value of selected to that particular option. using the clicked function.

It will also reevaluate isSelected to true or false respectively. If a particular panel’s option equals the value for selected, it will evaluate to true. This will trigger the WhileTrue ux tag to activate its markup.

Please note - I edited my earlier comment because my reference to IsSelected in the documentation was incorrect. IsSelected is part of the Fuse Selection Namespace (a UX Class), while isSelected is just the name that @Anders_Lassen used for his custom JavaScript function.

Hope this helps!

[forza]

HI @Angela_Burton,

That’s what i meant . Thank you very much. I was trying to do it like this:
var options = observeble(“Tomatoes”,“Bananas”,“Mangoes”,“Pineapple”);
var selected = Observable(“Tomatoes”);
var opt = options.map(myFunction);
function myFunction(option){
return …
}

[Angela_Burton]

Hi, @forza. You’re welcome!

JavaScript is a very flexible language. There’s often more than one way to do something.

The last example you gave could work, where a function declared elsewhere is passed to map. Doing it this way, my code example would look like this:

var options = fruits.map(returnObj);

function returnObj(option) {
	return {
		title: option,
		isSelected: Observable(function() {
			return selected.value === option;
		}),
		clicked: function() {
			selected.value = option;
		}
	};
};
module.exports = {
	options: options
};

What I don’t think is possible is separate functions for each return (i.e. title, isSelected, and clicked).