Reduce, then Subscribe
The subscribe function after reduce is never executed
HTML
<script src="https://rawgit.com/staltz/cycle/master/dist/cycle.min.js"></script>
<div class="js-container main-container"></div>
CSS
html{
height: 100%;
}
body {
min-height: 100%;
}
.main-container {
display: inline-block;
background: red;
width:100%
}
.main-container > .left {
display: inline;
float:left;
width: 25%;
height: 800px;
background: green;
}
.main-container .left .select-wrap {
display: inline-block;
text-align: center;
background: grey;
margin:1px;
border:1px solid black;
border-radius:5px;
width: calc( 100% - 4px );
height: calc( 5% - 4px );
}
.main-container .left .form {
display: inline-block;
background: yellow;
margin:1px;
border:1px solid black;
border-radius:5px;
width: calc( 100% - 4px );
}
.main-container .left .form .field {
display: block;
margin: 10px auto;
width: 90%;
}
.main-container .left .form button {
display: block;
margin: 10px auto;
}
.main-container > .right {
display: inline;
float:left;
width: 75%;
background: green;
}
.main-container > .right .pipes {
display: inline-block;
width: 32%;
height: 796px;
margin: 2px;
border: 1px solid black;
border-radius: 5px;
background: purple;
}
JavaScript
var h = Cycle.h;
var Rx = Cycle.Rx;
var SelectModel = Cycle.createModel(function (intent) {
return {
items$: Rx.Observable.just( [
{ display_name : 'foo', value: 'foo' } ,
{ display_name : 'baz', value: 'baz' } ,
{ display_name : 'bar', value: 'bar' } ,
] )
};
});
var SelectView = Cycle.createView(function (model) {
return {
vtree$: model.get( 'items$' )
.map( function( items ) {
return h('div.select-wrap', {}, [
h('label', {}, 'Model' ),
h('select', { onchange: 'selectChange$' },
items.map(function(item){
return h('option.field', {
value : item.value },
item.display_name )
})
)
]);
})
};
});
var SelectIntent = Cycle.createIntent(function (view) {
return {
stop$: view.get('selectChange$').map(function () { return 'stop'; }),
changed$: view.get('selectChange$').map(function () { return 'changed'; })
};
});
SelectIntent.inject(SelectView).inject(SelectModel).inject(SelectIntent);
var renderer = Cycle.createRenderer('.js-container');
renderer.inject(SelectView);