Hello everyone,
since 3 days im fighting with CanJs to update my list of datas after added a data.
basically i have 3 moustache views.
one for app view with inside 2 other views (list and create)
when i destroy data is removed of the database and list is refreshed.
but when i submit a new data with the form, data is saved but view is not refresh.
the event {Client} created is never triggered.
what have i forgot?
the coffeescript file
- Client = can.Model.extend
- findAll : 'GET /api/clients'
- findOne : 'GET /api/clients/{id}'
- create : 'POST /api/clients'
- update : 'PUT /api/clients/{id}'
- destroy : 'DELETE /api/clients/{id}'
- , {}
- Client.List = can.Model.List.extend
- Map: Client
- , filter: (tester) ->
- clients = new Client.List()
- this.each (client) ->
- if tester(client)
- clients.push(client)
- return clients
- can.Component.extend
- tag: 'clients-create'
- template: can.view("clients-create-template")
- scope:
- submitClient: (scope, el, ev) ->
- ev.preventDefault()
- client =
- name: this.attr('name')
- notes: this.attr('notes')
- new Client client
- .save()
- this.attr('name', '')
- this.attr('notes', '')
- console.log(Client.List(client))
- can.Component.extend
- tag: 'tbody'
- template: can.view("clients-list-template")
- scope:
- edit: (client) ->
- client.attr("editing", true)
- updateTodo: (client, el) ->
- client.attr("name", el.val())
- client.attr("notes", el.val())
- client.attr("editing",false)
- events:
- "{Client} created": (construct, ev, newClient) ->
- console.log(newClient)
- this.scope.attr('clients').push(newClient)
- can.Component.extend
- tag: 'clients-app'
- scope:
- Client: Client
- clients: new Client.List({})
- displayedClients: () ->
- return this.attr('clients')
- # make sure to initialize the Control
- # new Routing(document);
- # can.route.ready()
- frag = can.view("clients-app-template",{})
- $('#clients').html(frag)
- <script type="text/mustache" id="clients-app-template">
- <clients-app>
- <a can-click="create" class="button secondary popup-link" href="#!create"><i class="fa fa-plus-circle"></i> Add Client</a>
- <clients-create></clients-create>
- @{{#if clients}}
- <table>
- <thead>
- <tr>
- <th>Id</th>
- <th>Name</th>
- <th>Has projects</th>
- <th>Notes</th>
- <th>Actions</th>
- </tr>
- </thead>
- <tbody clients='displayedClients'></tbody>
- </table>
- @{{else}}
- <h3>No data found in database.</h3>
- @{{/clients}}
- </clients-app>
- </script>
- <script type="text/mustache" id="clients-list-template">
- @{{#each clients}}
- <tr class="client">
- <td data-title="Id">@{{id}}</td>
- <td data-title="Name">@{{name}}</td>
- <td data-title="Has projects">@{{#if projects}} Yes @{{else}} No @{{/projects}}</td>
- <td data-title="Notes">@{{#if notes}} Yes @{{else}} No @{{/notes}}</td>
- <td data-title="Actions">
- <a href=""><i class="fa fa-edit"></i></a> edit
- <a can-click="destroy"><i class="fa fa-minus-square-o"></i></a> delete
- </td>
- </tr>
- @{{/each}}
- </script>
- <script type="text/mustache" id="clients-create-template">
- <form method="POST" action="http://iprofero.local/admin/clients" accept-charset="UTF-8" can-submit="submitClient">
- <input name="_token" type="hidden" value="d5KDyzm5plECCdhGKdM3fyMrbOmjRxxyMuH8m0In">
- <div class="row">
- <label for="name">Enter client name</label> <input required="1" can-value="name" name="name" type="text" id="name">
- </div>
- <div class="row">
- <label for="notes">Add a note</label> <textarea can-value="notes" name="notes" cols="50" rows="10" id="notes"></textarea></div>
- <input class="create primary" type="submit" value="Create">
- </form>
- </script>