cyclejs-community / README

Cycle.js Community README, code of conduct and introductions.
MIT License
24 stars 1 forks source link

Need help (CycleJS and isolate) #14

Closed mapkuff closed 7 years ago

mapkuff commented 7 years ago

I try to learn isolate but I have no idea why isolate won't work. this can run without error but no scope was added to element. ;(

import {Sources} from "../base/Sources";
import {Sinks} from "../base/Sinks";
import {Observable} from "rxjs";
import {header, h1, a, span, b, nav, div, ul, li, img} from "@cycle/dom";
import isolate from "@cycle/isolate";

var nonIsolatedHeaderComponent = function(sources: Sources): Sinks {

    return {
        DOM: Observable.of(
            header('.main-header', [
                a('.logo', {href:"/" /*TODO*/},[
                    span('.logo-mini',[
                        b('A'),
                        'LT'
                    ]),
                    span('.logo-lg', [
                        b('Admin'),
                        'LTE'
                    ])
                ]),
                nav('.navbar.navbar-static-top',[
                    div('.navbar-custom-menu', [
                        ul('.nav .navbar-nav', [
                            li('.dropdown.user.user-menu', [
                                a('.dropdown-toggle',{attrs: {href : '#'} }, [
                                    img('.user-image', {attrs: {alt:'User Image', src:'/TODO'} }),
                                    span('.hidden-xs', 'test')
                                ])
                            ])
                        ])
                    ])
                ])
            ])
        )
    };
};

var isolatedHeaderComponent = isolate(nonIsolatedHeaderComponent);

export {isolatedHeaderComponent as headerComponent};
mapkuff commented 7 years ago
function isolateAllSinks<So, Si>(sources: So, sinks: Si, scope: string): Si {
  const scopedSinks = <Si> {};
  for (let key in sinks) {
    if (sinks.hasOwnProperty(key)
    && sources[key]
    && typeof sources[key].isolateSink === `function`) {
      scopedSinks[key] = sources[key].isolateSink(sinks[key], scope);
    } else if (sinks.hasOwnProperty(key)) {
      scopedSinks[key] = sinks[key];
    }
  }
  return scopedSinks;
}

I found out why it's not working.

On the line && typeof sources[key].isolateSink === 'function' and Observable sure don't have attribute isolateSink

Now I created my own isolate function. everything work fine now :D