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. 

  • 相关阅读:
    优化Hibernate所鼓励的7大措施:
    Java未赋值变量的默认初始值
    年轻代
    JVM介绍
    Java锁的种类以及辨析
    java语言复制数组的四种方法
    static和final
    抽象函数抽象类
    try catch finally
    九大内置对象
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5853999.html
Copyright © 2011-2022 走看看