[Angular 2] Refactoring mutations to enforce immutable data in Angular 2
TodoItemRender.ts:
import {Component, Input, ViewEncapsulation, EventEmitter, Output} from 'angular2/core';
@Component({
selector: 'todo-item-renderer',
// encapsulation:ViewEncapsulation.Emulated, //Default, (parent style pass )in and no (child style go) out
// encapsulation:ViewEncapsulation.Native, // no in and no out
encapsulation:ViewEncapsulation.None, // in and out
template: `
<style>
.completed{
text-decoration: line-through;
}
</style>
<div>
<span [ngClass]="todo.status"
[contentEditable]="todo.isEdit">{{todo.title}}</span>
<button (click)="toggleTodo.emit(todo)">Toggle</button>
<button (click)="todo.edit()">Edit</button>
</div>
`
})
export class TodoItemRenderer{
@Input() todo;
@Output() toggleTodo = new EventEmitter();
}
Here we use EventEmitter to emit a event called 'toggleTodo'. Parent component (TodoList.ts) will catch the event and update the TodoService's todos array.
And todos array should be a new reference.
TodoList.ts:
import {Component} from 'angular2/core';
import {TodoService} from './TodoService';
import {TodoItemRenderer} from './TodoItemRenderer';
import {StartedPipe} from './started-pipe';
@Component({
selector: 'todo-list',
pipes: [StartedPipe],
directives: [TodoItemRenderer],
template: `
<ul>
<li *ngFor="#todo of todoService.todos | started">
<todo-item-renderer [todo]="todo"
(toggleTodo) = "todoService.toggleTodo($event)" // Contains the todoModule
></todo-item-renderer>
</li>
</ul>
`
})
export class TodoList{
constructor(public todoService: TodoService){
}
}
TodoService.ts:
import {TodoModule} from './TodoModule';
export class TodoService {
todos = [
//init some todos
new TodoModule("eat"),
new TodoModule("sleep"),
new TodoModule("code")
];
addNewTodo(todo) {
this.todos = [...this.todos, todo];
}
toggleTodo(todo) {
const i = this.todos.indexOf(todo);
todo.toggle();
this.todos = [
...this.todos.slice(0, i),
todo,
...this.todos.slice( i + 1)
];
}
}
---------------------
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.