Following Anthony's suggestion, im posting this question here since there isn't yet a StackOverflow or forum where this kind of request probably fit better. Hope you don't mind and can point some directions to where look further.

Im trying to build a small component, based on the iteration example, where I have a list of numbers that I can add or remove items.

I've published the working sample here: http://jsfiddle.net/lmartins/VPB93/

Let's say I wanted to achieve the following:

• When no items on the list show a "no items" message instead - This would happen of first page load and if the user deleted all items

What would you suggest doing to achieve this, I though of custom events or setting an watcher on the items array using the observer plugin but im still lacking the knowledge to figure how all the parts fit together.

Is it possible to insert content into composed components like this?

<app-sidebar>
  <li>home</li>
  <li>profile</li>
</app-sidebar>

app-sidebar:

<div>
  <ul>
    <!-- content from component goes here -->
    <content></content>
  </ul>
<div>

This is how it's done with native web components. Is there a ripple way? Couldn't find anything in the documentation.

I'm not sure if this is the correct way to do it but I didn't found another solution. This basically allows manipulating the view object when a new Ripple instance is created:

Ripple.on('construct', function (View) {
})

Maybe construct is not the best name and I should have called it instance or something. This would also allow ripple-router#34 to work.

What do you think?

Starting to play with ripple and reading the composition docs. It says that the parents pass the data to the children. I'm a bit confused on what you give the parents to render the children correctly. Is it an array of objects? Example:

[
  {
    username: "anthony",
    ...
  },
  {
    username: "matt",
    ...
  }
]

It would be rather useful to see a working example without using component. I am considering using ripple in my current project- which uses requirejs to manage modules. Else, if I get some guidance I could eventually do this myself and submit a PR.

Following the iteration example, i've noticed that the directive is passed in the container element instead of the element being cloned at each loop.

This might present some limitations, one example being the following. Let's say I have a ul that contains my data items. When there are no items to show I wan't to show an li with some specific formatting. If I try that now, just by having the extra liinside the element where each is applied it breaks.

This is more a question than a suggestion, just curious about the reasons behind that design option.

The directions say "In each directory run make build, then open up index.html." When I cd into a directory and type make build, I get the error make: *** No rule to make target `build'. Stop.

Can anyone help me get this started?

Make build at the top level does work, and seems to install a shit-ton of things, so the tool is actually working...

I have a property set to an array and I want to be able to get its length attribute on the template. Is that possible using ripplejs/ripple standalone or using any plugin?

My code looks like the following:

var ripple = require('ripple');
var template = '<div>{{items.length}}</div>';
var View = ripple(template);

View.attr('items', {type: 'array'});

View.on('ready', function(view) {
  setTimeout(function () {
    view.get('items').push(1); // does not update the template
  }, 1000);
});

var view = new View({items: [10, 20, 30, 0, 4]});

view.appendTo(document.body);

1. Creating view with selector

When I run the test suite the following test is running well:

  it('should create a view with a selector', function () {
    var test = document.createElement('div');
    test.id = 'foo';
    document.body.appendChild(test);
    View = ripple('#foo');
    var view = new View();
    assert(view.template = '<div id="foo"></div>');
  });

But in reality when I try to create a view with selector out of existing DOM it cuts out the wrapper. For example:

html -> <button id='myButton'>Save</button>

js -> var View = ripple('#myButton'); var viewInstance = new View()

I end up having viewInstance.template = 'Save'. I guess due to this code in getTemplate:

  if (typeof template.innerHTML === 'string') {
    template = template.innerHTML;
  }

2. View with selector + Event Handlers (events plugin)

What is the best practice of attaching event handlers to Views created with selectors?

Again:

html -> <button id='myButton' on-click="{{ this.save }}">Save</button>

js -> var View = ripple('#myButton'); ....

I found that I must do viewInstance.replace('#myButton') (probably to trigger mount event and make it work). And note that this is only going to work if I avoid the problem in 1. I put myButton in kind of wrapper - lets say:

<div id='d'><button id='myButton' on-click="{{ this.save }}">Save</button></div>

and then var View = ripple('#d');

It seems that templates only work if they are composed of a single DOM element, even if it's a simple

This is not obvious in the documentation -- and templates without this minor wrapper element seem not to parse correctly beyond the first element.

It may be this is by design, but, if so - it's not obvious without inspecting all the examples, etc. :)

(no examples provided, but take any of the standard examples, and remove the outer wrapper element... :-1: )

-Dx

When trying to attach the change event to a data array, I get the following error: Uncaught TypeError: undefined is not a function

You can see the problem in jsfiddle: http://jsfiddle.net/lmartins/VPB93/

https://github.com/ripplejs/ripple/wiki/Composing-Views:

 var Avatar = ripple('<img src="http://graph.facebook.com/{{username}}/profile" />');

should be changed to:

var Avatar = ripple('<img src="http://graph.facebook.com/{{username}}/picture" />');

The wiki documentation would be easier to grasp if you included a definition of or reference to 'template' in https://github.com/ripplejs/ripple/wiki/Interpolation. It's not until near the doc end where 'template' is defined in https://github.com/ripplejs/ripple/wiki/Composing-Views.

Hi there,

I want to propose to add this badge to the README to show off inline-documentation:

The badge links to Inch CI and shows an evaluation by InchJS, a project that tries to raise the visibility of inline-docs. Besides testing and other coverage, documenting your code is often neglected although it is a very engaging part of Open Source that encourages aspiring developers to jump into the source and see how it all ties together.

So far over 600 Ruby projects are sporting these badges to raise awareness for the importance of inline-docs and to show potential contributors that they can expect a certain level of code documentation when they dive into your project's code and motivate them to eventually document their own. I would really like to do the same for the JavaScript community and roll out support for JS over the coming weeks (early adopters are forever, node-sass and when).

Although this is "only" a passion project, I really would like to hear your thoughts, critique and suggestions. Your status page is http://inch-ci.org/github/ripplejs/ripple

What do you think?

Hi, ripples.js is very good! However an error has occurred in IE11.

the error in line 48

rippleEnd           = new CustomEvent("rippleEnd", {detail: $ripple}),

IE11's CustomEvent is not able to new. I add some code and use in my project. It is following code and exec in if browser's CustomEvent is not newable.

rippleEnd = document.createEvent("CustomEvent");
rippleEnd.initCustomEvent("rippleEnd", false, false, { detail: $ripple });

for your information.

I thank you for reading my funny english through.

After readed the examples https://github.com/ripplejs/ripple/wiki/Composing-Views I like to know if is possible compose one view, inside of the other.

I have something like this:

 <div class="social-networks">
    <a href="http://twitter.com/">Twitter</a>
    <a href="http://facebook.com/">Facebook</a>  
</div>

and I would like to add inside of the oter views, in diferent points like:

 <div class="user-profile-networks">
    <p>{{name}}</p>
    <p>{{lastName}}</p>
    <p>{{email}}</p>
  <!-- social network view here-->
 <br> 
 <p>{{adress}}</p>  
</div>

Is this possible?

As part of the changes I'm making to the API for 0.6, I thought I'd talk about some of the goals and things I want to fix:

Extract the data-binding engine

This will allow me to finish of the virtual DOM engine. When creating a view you would need to choose a rendering engine for the view.

var bindings = binder(template)
  .use(someDirective)
  .use(someFiltersAndShit);

var View = ripple()
  .engine(bindings);

The syntax for this is still a little in progress, but the code behind it works, it's just a matter of making it feel nice in the API.

Less confusing API

At the moment, you need to listen to events on the class and possibly on the instance.

View.on('mounted', function(view){
  view.foo = bar;
});

View.prototype.submit = function() {
  this.foo = bar;
};

This is a little confusing having them next to each other but with a different syntax. Obviously one is an event and the other is a handler. There are a couple of examples of how this could work here: https://gist.github.com/anthonyshort/2dbf56c398f320a4db61

Option 1:

At the moment, I think this might be the nicest solution:

var View = ripple({
  initialize: function(){},
  mounted: function(){
    this.foo = bar;
  }, 
  submit: function(){
    this.foo = bar;
  }
});

View
  .use(binding(template))
  .attr('foo');

And if a key an event lifecycle name we'd add it as a callback automatically. This is a little too much magic possibly, but it does create a nice abstraction and allows all the methods to be in place.

Option 2

We use the ripple() function to create View that we inherit from:

var View = ripple()
  .engine(bindings)
  .attr('firstName')
  .attr('lastName');

View.on('initialize', function(view){
  view.foo = bar;
});

module.exports = View.extend({
  onClick: function(event){
    console.log('clicked!'); 
  }
});

Again, I think this confuses things because there are two different ways to add 'methods' and each has a different context. We'd also be using inheritance.

Option 3

Using a handler or method function to add methods so that it follows the same syntax as the events:

View.on('initialize', function(view){
  view.foo = bar;
});

View.handler('onClick', function(view, event){
  view.foo = bar;
});

Allow for ES6 modules and classes

If we used Option 1 above, it could possibly allow us to have a nice syntax for using ES6 classes. It's not necessary, but it would be nice.

import ripple from 'ripple';
import binder from 'binder';
import template from './template';

var bindings = binder()
  .use(someDirective)
  .use(someFiltersAndShit);

class View {
  constructor() {
    super();
    console.log('initializing a view!');
  },
  onClick(event) {
    console.log('clicked!');
  }
}

export ripple(View)
  .engine(bindings(template))
  .attr('firstName')
  .attr('lastName');

With an alternative syntax using extends

var Base = ripple()
  .engine(bindings(template))
  .attr('firstName')
  .attr('lastName');

exports class View extends Base {
  initialize() {
    console.log('initializing a view!');
  },
  onClick(event) {
    console.log('clicked!');
  }
}

Option 1, at the very least, would allow us to do this:

var View = ripple({
  mounted() {
    this.foo = bar;
  }, 
  submit() {
    this.foo = bar;
  }
});