RSS

AngularJS Tip 2 – Updates with Delta

21 אוק

אחד הפרוייקטים שאני עובד עליו בימים אלו יש לו אוביקטים גדולים מאוד שצריך לעביר מהשרת לדפדפן ובחזרה. אוביקט גדול יכול להגיע ל-50 שדות ובמקרים מסוימיים גם ליותר.  ע"פ דעתי במקרים אלו כדי לעבוד על מסרים שמכילים מידע חלקי ולא לשלוח כל פעם את כל האובייקט עם כל השדות שלו, אלא רק את השדות שיש בהם שינוי.

צד שרת עם ASP.NET ו- Entity Framework:

בלינק הזה אתם יכולים לראות את הפתרון שיש ב-EF : http://www.strathweb.com/2013/01/easy-asp-net-web-api-resource-updates-with-delta/

בצד של אנגולר אתם צריכים לעבוד קשה יותר! אנחנו צריכים לזהות את כל השדות שהשתנו ע"י המשתמש ולשלוח רק אותם לשרת. אני השתמש ביכולות של אנגולר להוסיף לכל שדה את המצב: $dirty או $pristine

לדגומא:

<form name="myForm" novalidate class="css-form">

<input type="text"   name="$ev.name" ng-model="user.name" required />

<input type="email"  name="$ev.email" ng-model="user.email" required />

<input type="number" name="$ev.age" ng-model="user.age" min="3"/>

   

<input type="submit" ng-click="mySubmit()"
                     ng-disabled="myForm.$invalid"
/>

</form>

עכשיו אני רוצה לכתוב קוד כללי שיודע להוציא את כל השדות מאובייקט user ששונו ע"י המשתמש כדי לשלוח אותם לשרת.

 (function(angular) { 'use strict';

    angular.module('app', [])

           .controller('MainCtrl', MainCtrl);

 

    //////////////// JavaScript //////////////

    function MainCtrl($scope, userProxy) {

        $scope.user = { name: 'guest', email: 'visitor@e4d.co.il', age: 41 };

        $scope.mySubmit = function () {

                 userProxy.update( getChanges($scope.user, $scope.myForm) );

        };

 

       function getChanges(source, form) {

           var result = {}, orgProp = ";

 

           for (var prop in form) {

               if (prop.indexOf('$ev.') == 0) {

                    if (form[prop].$dirty) {

                         orgProp = prop.substr(4);

                         result[orgProp] = source[orgProp];

                    }

                }

           }

           return result;

       }

  }

})(angular);

 

הערות:

1. כל השמות של ה- Input מתחילים ב- $ev. כדי שיהיה לי דרך לזהות את השדות שיש על האובייקט myForm ששיכים ל- Inputs. הקוד הזה נמצא ב- controller ולכן אני לא רוצה לעבוד דרך ה-UI.

2. ניתן להרחיב את ה- ng-model כך שהוא יוסיף את ה- name="$ev.XXX"  בצורה אוטומטית כאשר ה-XXX זה הערך שיש ב- ng-model.

 

אשמח לקבל פידבקים J

נ.ב:
בימים אלו אני עובד על מערכת טפסים אוטומטית שרק צריך לכתוב את ה-
HTML, כלומר את הטפסים בלי קוד JS והמערכת יודעת לעשות בדיקות ולשלוח את המידע חזרה לשרת. מי שמעונין בפרטים שידבר איתי.

Advertisements
 
5 תגובות

פורסם ע"י ב- אוקטובר 21, 2014 ב- AngularJS Tips

 

5 תגובות ל-“AngularJS Tip 2 – Updates with Delta

  1. eyalmrejeneyal

    אוקטובר 21, 2014 at 3:28 pm

    I would change
    if (prop.indexOf('$ev.') == 0) {
    to if (prop.indexOf('$ev.') === 0) {

    or even add a startWidth method on String

     
  2. Alexander Gold

    אוקטובר 21, 2014 at 7:17 pm

    אפשר גם לעשות watchCollection ואז לדחוף שינויים לאובייקט אחר שהוא ייצג את delta (קצת פחות יעיל כמובן)
    אבל קל הרבה יותר 🙂

     
  3. Lee Elenbaas (@LeeElenbaas)

    אוקטובר 28, 2014 at 3:32 am

    I whould have gone a different direction
    Adding a new 'update' directive that require the ngModel controller, then on any field i want to update i whould have go like this:

    that directive will simply respond to any ngModel method that updated the model
    see this plunker for a working sample:
    http://plnkr.co/edit/l9hJ7RZPxd04uElBn7HV?p=preview

     
    • Lee Elenbaas (@LeeElenbaas)

      אוקטובר 28, 2014 at 3:37 am

      it is possible to make my directive smarter, and if the status is $pristine to remove the value from the update

       
    • eyal.vardi

      אוקטובר 28, 2014 at 4:11 am

      הי,
      תודה על התגובה. חשבנו על הכיוון הזה אך יש בו כפילות של ה-update וה-ng-model וזה קשה מבחינת תחזוקה.
      בטיפ הבא שאני אכתוב אני אדגים איך לעשות default של בדיקות ו- attributes ע"פ ה-type והשם. זה יחסוך את הכתיבה הרבה של כל ה-directives בתוך ה-input. דומה לרעיון של class ב- css.

       

כתיבת תגובה

הזינו את פרטיכם בטופס, או לחצו על אחד מהאייקונים כדי להשתמש בחשבון קיים:

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

 
%d בלוגרים אהבו את זה: