zoukankan      html  css  js  c++  java
  • [AngularJS] Isolate State Mutations in Angular Components

    Managing state is one of the hardest things to do in any application. Angular 2 tackles this problem by making it easy to implement a reactive, uni-directional data flow that favor immutable operations. We are moving in the right direction in Angular 1 by moving our state and logic to models but invariably this raises a question. If we are moving to an immutable world, how do you manage mutable operations like forms in Angular? In this lesson, we are going to learn a surprisingly simple technique to isolate state mutations within a component using component lifecycle hooks.

    For example you have a bookmark component, and inside the component, you want to update the bookmark. The solution is you create a component just for update bookmark.

    <div class="bookmarks">
        <div ng-repeat="bookmark in bookmarksListCtrl.bookmarks | filter:{category:bookmarksListCtrl.getCurrentCategory().name}">
            <button type="button" class="close" ng-click="bookmarksListCtrl.deleteBookmark(bookmark)">&times;</button>
            <button type="button" class="btn btn-link" ng-click="bookmarksListCtrl.editBookmark(bookmark)">
                <span class="glyphicon glyphicon-pencil"></span>
            </button>
            <a href="{{bookmark.url}}" target="_blank">{{bookmark.title}}</a>
        </div>
        <div ng-if="bookmarksListCtrl.getCurrentCategory()">
            <button type="button" class="btn btn-link"
                ng-if="!bookmarksListCtrl.currentBookmark"
                ng-click="bookmarksListCtrl.createBookmark()">
                <span class="glyphicon glyphicon-plus"></span>
                Create Bookmark
            </button>
        </div>
        <save-bookmark
            ng-if="bookmarksListCtrl.currentBookmark"
            bookmark="bookmarksListCtrl.currentBookmark"
            save="bookmarksListCtrl.onSave(bookmark)"
            cancel="bookmarksListCtrl.reset()">
        </save-bookmark>
    </div>

    And inside the save-bookmark component, you can copy the original data, and modify on the copy data:

    class SaveController {
      $onChanges() {
        this.editedBookmark = Object.assign({}, this.bookmark);
      }
    }
    
    export default SaveController;

    This can isolate the component state muataion. 

  • 相关阅读:
    Codeforces 1062
    HDU 1247
    力扣 7. 整数反转
    力扣 3. 无重复字符的最长子串
    力扣1. 两数之和
    力扣 78.子集
    C++编译时报错“count”符号不明确
    Java邻接矩阵存储图简易版以及深度优先优先遍历和广度优先遍历
    word中超链接显示成{HYPERLINK "url"}形式的解决方案
    Hadoop在window上运行出现:java.io.IOException: (null) entry in command string: null chmod 0644
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5853999.html
Copyright © 2011-2022 走看看