Assuming list is a can.List instance:
{{#if list}}will check for the truthy value of list. This is akin to checking for the truthy value of any JS object and will result to true, regardless of list contents or length.
{{#if list.length}} will check for the truthy value of the length attribute. If you have an empty list, the length will be 0, so the #if will result to false and no contents will be rendered. If there is a length >= 1, this will result to true and the contents of the #if will be rendered.
#each and #list both iterate through an instance of can.List, however we setup the bindings differently.
#each will setup bindings on every individual item being iterated through, while #list will not. This makes a difference in two scenarios:
1) You have a large list, with minimal updates planned after initial render. In this case, #list might be more advantageous as there will be a faster initial render. However, if any part of the list changes, the entire #list area will be re-processed.
2) You have a large list, with many updates planned after initial render. A grid with many columns of editable fields, for instance. In this case, you many want to use #each, even though it will be slower on initial render(we're setting up more bindings), you'll have faster updates as there are now many sections.
Quick note on your case of if list has contents ..., else empty list area:
{{#each items}}Looping through list items!{{/each}}
{{^if items.length}}Show if there are no items!{{/if}}
The above should account for that scenario. If there's additional logic, I would consider writing a custom helper(depending on what the logic looks like).
