Hi,
I'm experiencing a strange problem with canjs 1.1.4 and JQuery 1.9.1.
I see a
I try to explain what I'm doing with code :)
In my html I included:
in try.js I extended List object for the model, adding two methods, and used It in Control and viewed in an ejs:
I'm experiencing a strange problem with canjs 1.1.4 and JQuery 1.9.1.
I see a
TypeError: contacts.count is not a function
when I create a list of objects, using fixture, and try to access to custom methods of the listI try to explain what I'm doing with code :)
In my html I included:
- <script src="js/vendor/jquery-1.9.1.js"></script>
- <script src="js/plugins.js"></script>
- <script src="js/vendor/can.js/can.jquery.js"></script>
- <script src="js/vendor/can.js/can.fixture.js"></script>
- <script src="js/try.js"></script>
in try.js I extended List object for the model, adding two methods, and used It in Control and viewed in an ejs:
- (function(){
- var CONTACTS = [
- {
- id: 1,
- name: 'William',
- address: '1 CanJS Way',
- email: 'william@husker.com',
- phone: '0123456789',
- category: 'co-workers'
- },
- {
- id: 2,
- name: 'Laura',
- address: '1 CanJS Way',
- email: 'laura@starbuck.com',
- phone: '0123456789',
- category: 'friends'
- },
- {
- id: 3,
- name: 'Lee',
- address: '1 CanJS Way',
- email: 'lee@apollo.com',
- phone: '0123456789',
- category: 'family'
- }
- ];
- var CATEGORIES = [
- {
- id: 1,
- name: 'Family',
- data: 'family'
- },
- {
- id: 2,
- name: 'Friends',
- data: 'friends'
- },
- {
- id: 3,
- name: 'Co-workers',
- data: 'co-workers'
- }
- ];
- //MODEL
- Contact = can.Model({
- findAll: "GET /contacts",
- create : "POST /contacts",
- update : "PUT /contacts/{id}",
- destroy : "DELETE /contacts/{id}"
- },{});
- Contact.List = can.Model.List({
- filter: function(category){
- this.attr('length');
- var contacts = new Contact.List([]);
- this.each(function(contact){
- if(category === 'all' || category === contact.attr('category')) {
- contacts.push(contact)
- }
- })
- return contacts;
- },
- count: function(category) {
- return this.filter(category).length;
- }
- });
- Category = can.Model({
- findAll: 'GET /categories'
- },{});
- can.fixture('GET /contacts', function(){
- return [CONTACTS];
- });
- var id= 4;
- can.fixture("POST /contacts", function(){
- return {id: (id++)}
- });
- can.fixture("PUT /contacts/{id}", function(){
- return {};
- });
- can.fixture("DELETE /contacts/{id}", function(){
- return {};
- });
- can.fixture('GET /categories', function(){
- return [CATEGORIES];
- });
- can.route( 'filter/:category' );
- can.route('', {category: 'all' });
- Filter = can.Control({
- init: function(){
- var category = can.route.attr('category') || "all";
- this.element.html(can.view('ejs/filterView.ejs', {
- contacts: this.options.contacts,
- categories: this.options.categories
- }));
- this.element.find('[data-category="' + category + '"]').parent().addClass('active');
- },
- '[data-category] click': function(el, ev) {
- this.element.find('[data-category]').parent().removeClass('active');
- el.parent().addClass('active');
- can.route.attr('category', el.data('category'));
- }
- });
- $(document).ready(function(){
- $.when(Category.findAll(), Contact.findAll()).then(
- function(categoryResponse, contactResponse){
- var categories = categoryResponse[0],
- contacts = contactResponse[0];
- new Filter('#filter', {
- contacts: contacts,
- categories: categories
- });
- });
- });
- })();
filterView.ejs contains:
I also tried to use jquery 1.8.3, but the problem is still the same.
Am I doing something wrong?
Thanks for any help.
- <ul class="nav nav-list">
- <% console.log(contacts) %>
- <li class="nav-header">Categories</li>
- <li>
- <a href="javascript://" data-category="all">All (<%= contacts.count('all') %>)</a>
- </li>
- <% categories.each(function(category){ %>
- <li>
- <a href="javascript://" data-category="<%= category.data %>"><%= category.name %> (<%= contacts.count(category.data) %>)</a>
- </li>
- <% }) %>
- </ul>
I also tried to use jquery 1.8.3, but the problem is still the same.
Am I doing something wrong?
Thanks for any help.