1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- // Create a view class, just like a model view.
- const TodoListView = Backbone.View.extend({
- initialize() {
- this.collection.on('add', this.addOne, this);
- },
- // First attempt (bad) at doing a list render.
- renderNaive() {
- this.collection.forEach(function (todoItem) {
- const todoView = new TodoView({ model: todoItem });
- // Problem, "this" is the wrong context is it is needed for rendering.
- this.$el.append(todoView.render().el);
- });
- },
- addOne: function (todoItem) {
- const todoView = new TodoView({ model: todoItem });
- const rendered = todoView.render();
- this.$el.append(rendered.el);
- },
- render: function () {
- // Now pass the proper context to the loop callback.
- this.collection.forEach(this.addOne.bind(this));
- return this;
- }
- });
- function todoViewListExample(list) {
- // Note: collection (not model) being passed.
- const todoListView = new TodoListView({
- collection: list,
- });
- todoListView.render();
- console.log(todoListView.el);
- // Apply to the DOM.
- $('#app').html(todoListView.el);
- }
- $(function () {
- globalList = todoListFromServer();
- todoViewListExample(globalList);
- });
|