# Please Bring YouTube Tutorials Back

**URL:** <https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673>\
**Category:** General\
**Created:** [March 7, 2019, 6:52pm UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673 "2019-03-07T18:52:59Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Angela\_Burton](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@Angela\_Burton](https://forums.fusetools.com/u/Angela_Burton)\
**Post date:** [March 7, 2019, 6:52pm UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/1 "2019-03-07T18:52:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![aeq](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/aeq/32/129_2.png) [@aeq](https://forums.fusetools.com/u/aeq)\
**Post date:** [March 8, 2019, 6:43am UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/2 "2019-03-08T06:43:52Z")

</div>

I’ll second that, @Anders_Lassen! 😃

---

<div class="post-metadata">

**Author:** ![aeq](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/aeq/32/129_2.png) [@aeq](https://forums.fusetools.com/u/aeq)\
**Post date:** [March 8, 2019, 7:47am UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/3 "2019-03-08T07:47:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Samuel\_Rizzon](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/samuel_rizzon/32/759_2.png) [@Samuel\_Rizzon](https://forums.fusetools.com/u/Samuel_Rizzon)\
**Post date:** [March 8, 2019, 11:59am UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/4 "2019-03-08T11:59:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Angela\_Burton](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@Angela\_Burton](https://forums.fusetools.com/u/Angela_Burton)\
**Post date:** [March 11, 2019, 7:11pm UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/5 "2019-03-11T19:11:33Z")

</div>

Cool! Thanks, @aeq 😁

---

<div class="post-metadata">

**Author:** ![kusma](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kusma/32/595_2.png) [@kusma](https://forums.fusetools.com/u/kusma)\
**Post date:** [March 14, 2019, 9:00pm UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/6 "2019-03-14T21:00:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MVONDO\_Yannick](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/mvondo_yannick/32/214_2.png) [@MVONDO\_Yannick](https://forums.fusetools.com/u/MVONDO_Yannick)\
**Post date:** [March 14, 2019, 9:37pm UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/7 "2019-03-14T21:37:39Z")

</div>

@kusma, who can we get them please

---

<div class="post-metadata">

**Author:** ![Angela\_Burton](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@Angela\_Burton](https://forums.fusetools.com/u/Angela_Burton)\
**Post date:** [March 15, 2019, 3:49pm UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/8 "2019-03-15T15:49:27Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![kusma](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kusma/32/595_2.png) [@kusma](https://forums.fusetools.com/u/kusma)\
**Post date:** [March 18, 2019, 10:54am UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/9 "2019-03-18T10:54:32Z")

</div>

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

https://www.youtube.com/embed/videoseries?list=PLdlqWm6b-XALJgM3fGa4q95Yipsgb8Q1o&wmode=transparent&rel=0&autohide=1&showinfo=1&enablejsapi=1

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

---

<div class="post-metadata">

**Author:** ![mvondoyannick](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/mvondoyannick/32/737_2.png) [@mvondoyannick](https://forums.fusetools.com/u/mvondoyannick)\
**Post date:** [March 31, 2019, 3:59pm UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/10 "2019-03-31T15:59:53Z")

</div>

Hi, here a playlist of YouTube FuseTools videos.

[https://www.youtube.com/playlist?list=PL\_6WmYF-2HLlBCTYZIfVsNMY0hquPMUe6](https://www.youtube.com/playlist?list=PL_6WmYF-2HLlBCTYZIfVsNMY0hquPMUe6)

![Screenshot_20190331-165027](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/fusetools1/original/1X/ac83b9019e4d1b476b186e15345e2c0f39d8232f.jpeg)

---

<div class="post-metadata">

**Author:** ![forza](https://avatars.discourse-cdn.com/v4/letter/f/74df32/32.png) [@forza](https://forums.fusetools.com/u/forza)\
**Post date:** [July 25, 2019, 10:49am UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/11 "2019-07-25T10:49:14Z")

</div>

Hallo have watched fuse 's videos on youtube about the Reusable Components([https://www.youtube.com/watch?v=-jk3jNQzE4U](https://www.youtube.com/watch?v=-jk3jNQzE4U)[[1]](https://canada1.discourse-cdn.com/flex035/uploads/fusetools1/original/1X/235a5d8825bb7603001824c8809d29899efe1b72.jpeg) ) 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??

 ![1](https://canada1.discourse-cdn.com/flex035/uploads/fusetools1/original/1X/235a5d8825bb7603001824c8809d29899efe1b72.jpeg) ![1](https://canada1.discourse-cdn.com/flex035/uploads/fusetools1/original/1X/235a5d8825bb7603001824c8809d29899efe1b72.jpeg)

---

<div class="post-metadata">

**Author:** ![Angela\_Burton](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@Angela\_Burton](https://forums.fusetools.com/u/Angela_Burton)\
**Post date:** [July 25, 2019, 1:07pm UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/12 "2019-07-25T13:07:27Z")

</div>

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](https://fuseopen.com/docs/fuse/selection/isselectedfunction.html#section-introduction) 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](https://youtu.be/-jk3jNQzE4U?t=1529) to watch Anders explain his export scripting in the YouTube tutorial.

Read more about `Array.prototype.map()` in the official Mozilla JavaScript documentation [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map).

`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” 🍍

---

<div class="post-metadata">

**Author:** ![forza](https://avatars.discourse-cdn.com/v4/letter/f/74df32/32.png) [@forza](https://forums.fusetools.com/u/forza)\
**Post date:** [July 25, 2019, 3:12pm UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/13 "2019-07-25T15:12:25Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Angela\_Burton](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@Angela\_Burton](https://forums.fusetools.com/u/Angela_Burton)\
**Post date:** [July 25, 2019, 3:52pm UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/14 "2019-07-25T15:52:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![forza](https://avatars.discourse-cdn.com/v4/letter/f/74df32/32.png) [@forza](https://forums.fusetools.com/u/forza)\
**Post date:** [July 25, 2019, 8:04pm UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/15 "2019-07-25T20:04:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Angela\_Burton](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@Angela\_Burton](https://forums.fusetools.com/u/Angela_Burton)\
**Post date:** [July 26, 2019, 1:45pm UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/16 "2019-07-26T13:45:54Z")

</div>

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](https://fuseopen.com/docs/fuse/reactive/each.html) 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!

---

<div class="post-metadata">

**Author:** ![forza](https://avatars.discourse-cdn.com/v4/letter/f/74df32/32.png) [@forza](https://forums.fusetools.com/u/forza)\
**Post date:** [July 28, 2019, 10:59am UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/17 "2019-07-28T10:59:25Z")

</div>

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 …  
}

---

<div class="post-metadata">

**Author:** ![Angela\_Burton](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@Angela\_Burton](https://forums.fusetools.com/u/Angela_Burton)\
**Post date:** [July 30, 2019, 11:44am UTC](https://forums.fusetools.com/t/please-bring-youtube-tutorials-back/7673/18 "2019-07-30T11:44:50Z")

</div>

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`).