added a else-if statement

[seanwestfall]

Hey @phillipskevin
Sorry for taking so long to get back to you, here is what I envision: (code is from the homepage)

{{# if(this.todosPromise.isPending) }}
    Loading todos…
{{ else if (this.todosPromise.isRejected) }}
    Error: {{ this.todosPromise.reason.message }}
{{ else if (this.todosPromise.isResolved) }}
    <ul>
        {{# for(todo of this.todosPromise.value) }}
            <li>
                {{ todo.name }}
            </li>
        {{/ for }}
    </ul>
{{ else }}
    Just demonstrating the else statement
{{/ if }}

Compare to the original:

{{# if(this.todosPromise.isPending) }}
    Loading todos…
{{/ if }}
{{# if(this.todosPromise.isRejected) }}
    Error: {{ this.todosPromise.reason.message }}
{{/ if }}
{{# if(this.todosPromise.isResolved) }}
    <ul>
        {{# for(todo of this.todosPromise.value) }}
            <li>
                {{ todo.name }}
            </li>
        {{/ for }}
    </ul>
{{/ if }}

The reason being it'll make syntax like this from the home page a little more intuitive. I realize after going through the source that an "else if" is pretty much exactly like an "if" in succession, but most languages and frameworks support an if / else if / else pattern when setting up a succession of condition statements.

Is there anyway we could possibly do user group research to know if developers prefer this pattern over what's currently there?

Also, I added a test file, though it's a copy of the if test, which is what it'll look like mostly likely.

[phillipskevin]

Thanks so much for this contribution @seanwestfall. How does this differ from the if helper?

Can you add a test that shows how it works? Something like

can-stache/helpers/-if-test.js

Lines 95 to 107 in 4169627

	QUnit.test("#if works with call expressions", function(assert) {
	var template = stache("{{#if(foo)}}foo{{else}}bar{{/if}}");
	var map = new DefineMap({
	foo: true
	});
	var div = document.createElement("div");
	var frag = template(map);
	div.appendChild(frag);
	assert.equal(div.innerHTML, "foo");
	map.foo = false;
	assert.equal(div.innerHTML, "bar");
	});

would be a great place to start.

[seanwestfall]

Hey @phillipskevin
Responded in the original pull request comment, above your response.

[phillipskevin]

Thanks @seanwestfall for explaining! I like the idea of an elseIf helper. This would probably need to work similar to the switch helper so that the elseIf is only evaluated if the if was falsey.

If it works similar to if then both <p> tags will be displayed for something like:

{{#if(animal.barks)}}
  <p>The animal barks</p>
{{#elseIf(animal.isADog)}}
  <p>The animal is a dog</p>
{{/if}}

when the data looks like:

{
  animal: { barks: true, isADog: true }
}