Skip to content
This repository has been archived by the owner on Jan 27, 2024. It is now read-only.

More examples? #4

Open
jteneycke opened this issue Mar 14, 2013 · 1 comment
Open

More examples? #4

jteneycke opened this issue Mar 14, 2013 · 1 comment

Comments

@jteneycke
Copy link

I really enjoy using Underscore and Angular together, and I was really stoked to use this for filters and whatnot, but could you toss up some more examples of how you're using it?

@floydwch
Copy link
Owner

Short answer: The refactoring technique Inline Temp.

Many underscore's using contexts with angular often introduce temporal names, perhaps they could be assigned more practical names, but it maybe just an overhead.

See the following context:

naive version:

js:

  var books = [...book's collection];

  $scope.booksGroupByDueDate = _.groupBy(books, 'dueDate');
  $scope.booksGroupByOwner = _.groupBy(books, 'owner');
  $scope.booksGroupByLib = _.groupBy(books, 'lib');

html:

<li ng-repeat="(dueDate, books) in booksGroupByDueDate">
  {{dueDate}}
  <ul>
    <li ng-repeat="book in books">
      {{book.name}}
    </li>
  </ul>
</li>

<li ng-repeat="(owner, books) in booksGroupByOwner">
  {{owner}}
  <ul>
    <li ng-repeat="book in books">
      {{book.name}}
    </li>
  </ul>
</li>

<li ng-repeat="(lib, books) in booksGroupByLib">
  {{lib}}
  <ul>
    <li ng-repeat="book in books">
      {{book.name}}
    </li>
  </ul>
</li>

doesn't it look better:

js:

  $scope.books = [...book's collection];

html:

<li ng-repeat="(dueDate, books) in books|groupBy:'dueDate'">
  {{dueDate}}
  <ul>
    <li ng-repeat="book in books">
      {{book.name}}
    </li>
  </ul>
</li>

<li ng-repeat="(owner, books) in books|groupBy:'owner'">
  {{owner}}
  <ul>
    <li ng-repeat="book in books">
      {{book.name}}
    </li>
  </ul>
</li>

<li ng-repeat="(lib, books) in books|groupBy:'lib'">
  {{lib}}
  <ul>
    <li ng-repeat="book in books">
      {{book.name}}
    </li>
  </ul>
</li>

If you use underscore heavily, you may find many codes could be refactoried in favor of angular's expression.

To give more examples is OK but need time to coin good examples, maybe community could contribute their usecases.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants