urigo / angular-meteor Goto Github PK

I was trying several mvvm frameworks with meteor, anuglar-meteor are most promising. Can angular-meteor work with famo.us/angular right now? I am working on a demo with meteor-vue and planning to write a cool calendar in next months. Thank you very much, sorry for this "routine" problem.

When I use meteor fullcalendar and semantic-ui, I met a problem that how to use modal which is different in semantic-ui way and meteor template Then I think it is better to switch to angular-meteor which give me a easy way for integrations. So for the lack of supporting 1.3 angular in angular-ui bootstrap, I think it is better to keep a 1.2.26 version angular-meteor and a new meteor package for angular-ui bootstrap depending this angular-meteor.

Personally I want to use semantic-ui as much as possible especially for static part, and bootstrap for dynamic part, e.g. modals.

Maybe it is not only convenient and super fast to use both angular-meteor and angular-ui projects for prototyping but also logically clear.

If i try to have my own bower.json in order to manage packages, a plethora of problems arises.

Most of the are related to different angular packages that are not resolving properly. Any ideas on this problem? Might it have something to do with meteor-bower?

I am concerned that the services provided by angular-meteor ($collections, $users, $methods) may name - clash with core Angular services, either now or in the future.

I think AngularJS core team recommend that 3rd parties do not use $ (see the $ Prefix Naming Convention section) ?

How about $meteor as an alternative prefix? (e.g. $collections becomes $meteorCollections) ? That is how the AngularFire library handles this ($firebase and $firebaseSimpleLogin)

I'm getting this error when I deploy my app to modulus server.

Uncaught Error: [$injector:unpr] Unknown provider: tProvider <- t
http://errors.angularjs.org/1.3.1/$injector/unpr?p0=tProvider%20%3C-%20t df443c28b894e8e6bbffa91b0330520825ad6b70.js:55

In my development machine everything works fine.Do you have any idea what about is this ?

I saw that in this module the angular version preset is 1.0.2, that's > year old, angular is thousand times better now, can I easily integrate it with angular-meteor? Not easily, where would I need to start ?

FYI: I'm a meteor beginner.

The meteor tutorial teaches us to use publications to secure our apps. What about with angular-meteor?

Guidance on writing Angular Karma unit tests using mocks of the angular-meteor services.

Any clue how I can defer ui-router to render the state until the user has logged in / some collection has loaded? I'm thinking of the equivalent of waitOn for iron:router.

My app is automatically logging in users on page load using some SSO headers (from within the company network) and that's causing issues with templates being rendered before permissions have been loaded.

When I click on any item, it redirects me to the home page

The biggest part of this package is it's docs, why are they shipped with package itself?

Hi,
inspired by this post: http://teropa.info/blog/2014/10/24/how-ive-improved-my-angular-apps-by-banning-ng-controller.html I try to write a form component wchich looks like this:

<template name="my-form.html">
    <form name="myForm">
        ...
    </form>
</template>

.directive('myForm', function() {
    return {
        templateUrl: 'my-form.html',
        controller: function($scope) {
            $scope.myForm === undefined;  // always true
        })
    };
})

Problem is with accessing ng-form controller from MyFormController. ng-form directive publishes this controller on current scope wchich is scope created by ng-template directive. Since scope of myForm controller is one level higher I can't reach ng-form controller. My question is: can we resign from creating new scope in ng-template? This looks like good idea, but I'm not sure if this wouldn't break something.

I am trying to delay angular.bootstrap call, so I my ui-router stateChange validations can properly check for authorization using the logged user. The reason I want to delay angular.bootstrap is the fact that Meteor.user() is not available that soon.

What I have tried so far:

• running angular.bootstrap inside a Tracker.autorun block
• running angular.bootstrap from a setTimeout callback

In both scenarios I get an error message telling me angular is already bootstraped on the pointed element. As far as I can tell, there was no double call to angular.bootstrap.

This is not really a bug report, but an ask for help. If there is anywhere else to ask questions, please point me to it.

Hey @Urigo ,

Just another curiosity. Did you think of a way to bind to other reactive data sets from the meteor framework? I know your binding to collections through bind and bindOne on the $collection service. However, I don't see anything in regards to any other reactive data such as session variables.

Any plans on doing this in the future?

Also, just a heads up your api documentation is linking to steps in the tutorial instead of actually displaying the documentations.

bind(scope, model, auto, publisher, paginate)

The publisher can be specified as the fourth parameter. But how do i specify a parameter to that publisher's callback function?

Let's say i have my publication like this:

Meteor.publish("propertiesOf", function (sellerId) {

return Properties.find({
        $and:[
            {sellerId: sellerId},             //publish only the properties of specified seller
            {sellerId: {$exists: true}}    //sellerId field exists
        ]
    });

});

I can call $collection.bind($scope, properties, true, propertiesOf)
in my controller but how do i pass the sellerId to the 'propertiesOf' publish function?

I've got an edit form where I'd like to bind a single document to the scope, but $collection.bind() currently always binds an array. Any chance you could add an argument to optionally call findOne() instead of find()? Or how are you handling this yourself currently?

@Urigo,

I've also noticed that when going from one route to another and changing $collection and $subscribe methods the data isn't wiped. It's carried over from one page to the other. Even when specifying a narrower subscription on the latter pages.

Example:

First Page Controller:

$subscribe.susbcribe("allItems");
$collection.collection(Items).bind($scope, "items", true, true);

Second Page Controller:

$subscribe.subscribe("publicItems");
$collection(Items).bind($scope, "publicItems", true, true);

Publisher:

Meteor.publish("allItems", function() {
  return Items.find();
});

Meteor.publish("publicItems", function() {
  return Items.find({public: true});
});

If I console.dir($scope.publicItems) in the second page by navigating from the first page through links, the collection remains a cumulative total of the two (which in this case happens to be the first page's collection). Whereas, it should wipe the data cache and only contain the limited scope where {public: true}.

Thoughts?

Although stated in the docs in my system an angular control does not work via the {{< yield}}.

It works if I refer the template from within the body directly.

Is there anything else needed (ònBeforeAction`) or similar?

First of all I want to thank you for this package.It's increases development time up to %60 an decreases codes up to %50.
I have a problem with tracking changes. I have a simple scenario for tracking who have last updated a document.I'm trying this with tracking collections observe.When document updated I call a method which is update document.updatedBy and document.updatedAt fields.Everything works fine except ; if the document is opened by two users at the same time and then updated by one of them the code enters an infinite loop.Do you know how can I handle this issue or is there another way to do this with angular-meteor ?

Hi,

I am experimenting with angular-meteor, and learning meteor + AngularJS frameworks at the same time. I would really appreciate your guidance on how to incorporate existing AngularJS packages, all of which include templates with the standard AngularJS {{ ... }} expression syntax.

I wanted to see if I could use the ui-grid AngularJS module in my angular-meteor application. To cut to the chase I simply downloaded the pre-built ui-grid-unstable.js and ui-grid-unstable.min.css files and added them to the client/lib and client/stylesheets folder. Meteor did its job and built them into my app's index.html, great.

I added ui.grid as a dependent module into my app, great:

angular.module('myMeteorApp',[
    'angular-meteor',
    'ui.router',
    'ui.grid'
]);

// Bootstrap AngularJS framework
Meteor.startup(function () {
    // Add ui.grid module as a dependency
    // NB: 25-Oct-2014: I don't really know what this does, but does seem to stop Angular for complaining during dependency injection
    angularMeteor.requires.push('ui.grid');

    angular.bootstrap(document, ['myMeteorApp']);
});

I then added a ui-grid attribute into my app page:

                <div class="row">
                    <div class="col-xs-12 my-grid" ui-grid="{ data: myList }"></div>
                </div>

And got this:

Because ui-grid uses standard AngularJS template syntax, and because angular-meteor switches {{ ... }} to [[ ... ]](to avoid clashing with Meteor Template subsystem), none of the ui-grid templates render correctly.

So, what are my real options?

I took a look at the meteor-ng-grid project to see how it was done there. It appears it replaces some of the templates with modified versions that use [[ ... ]]. The ui-grid project has many such templates. It doesn't seem viable in a real-world project to maintain angular-meteor equivalent versions of all of the templates, and update them by hand every time ui-grid bumps up versions.

One option might be to say I want to only use AngularJS for all of the front-end of my application ... understanding that I can;t use any Blaze - based templates (e.g. the useful loginButtons that comes with the accounts-ui packages). The huge advantage is that I could then access all of the AngularJS UI module ecosystem without any modification, whilst taking advantage of Meteor's reactivity and backend integration. If I could turn off the bit of code in angular-meteor that switches the Angular expression syntax (by a config setting?) , what would happen? Or, maybe the app could remove the (Template?) (Blaze?) packages from its standard set, so it doesn't try and get in the way .

I am happy to try a few experiments along these lines, but would really appreciate anyone's guidance, as I think you have already thought about these issues.

Also I apologise if this question is not really suitable for the github issues list. Is there a mailing list or similar for angular-meteor ?

Thanks,

Richard

Currently I have a query that looks like this:

      $collection IdleCollections.IdlePlayerEvents, {player: $stateParams.playerName}, limit: 7, sort: {createdAt: -1}
      .bind $scope, 'playerEvents'

I would expect this to only get the most recent 7 records from the database, and it does - eventually. It seems to run through every record before displaying those 7 though (as I can see it buffer on my screen). Is there a way to just get the top 7 without going through all of the records available on the client side? I'm guessing I should do this from Meteor.subscribe?

In the tutorial under Bind one object you mention that we don't need save buttons

but what if i need save button how to do that ??

On certain actions the following is printed to the log:

TypeError: Cannot read property 'then' of undefined
    at Object.ngIfWatchAction [as fn] (http://localhost:3000/packages/urigo_angular.js?bb1ce5cfe93e9dc2a14be7be84b4994234f5c846:23116:47)
    at Scope.$digest (http://localhost:3000/packages/urigo_angular.js?bb1ce5cfe93e9dc2a14be7be84b4994234f5c846:13984:29)
    at Scope.$apply (http://localhost:3000/packages/urigo_angular.js?bb1ce5cfe93e9dc2a14be7be84b4994234f5c846:14246:24)
    at HTMLElement.<anonymous> (http://localhost:3000/packages/urigo_ionic.js?c7b1eb0f06e3a64e8cdafaae89f30f4245081809:17822:13)
    at HTMLElement.jQuery.event.dispatch (http://localhost:3000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:4657:9)
    at HTMLElement.elemData.handle (http://localhost:3000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:4325:46)
    at triggerMouseEvent (http://localhost:3000/packages/urigo_ionic.js?c7b1eb0f06e3a64e8cdafaae89f30f4245081809:5048:7)
    at tapClick (http://localhost:3000/packages/urigo_ionic.js?c7b1eb0f06e3a64e8cdafaae89f30f4245081809:5037:3)
    at HTMLDocument.tapMouseUp (http://localhost:3000/packages/urigo_ionic.js?c7b1eb0f06e3a64e8cdafaae89f30f4245081809:5107:5) 

Referencing this block of code:

if (block) {                                                                                               // 23082
              previousElements = getBlockNodes(block.clone);                                                           // 23083
              $animate.leave(previousElements).then(function() {                                                       // 23084
                previousElements = null;                                                                               // 23085
              });                                                                                                      // 23086
              block = null;                                                                                            // 23087
            } 

What's the bindOne equivalent to .save()?

I have a bindOne set up for the logged in user – with 'auto' turned off:
$collection(Meteor.users).bindOne($scope, 'user', $rootScope.currentUser._id, false);

I don't want to auto update, but I can't figure out how to persist the data after editing.

There's a new archMatching option to Plugin.registerSourceHandler, which should be used by any plugin whose output is only for the client or only for the server (eg, CSS and HTML templating packages); this allows Meteor to avoid restarting the server when files processed by these plugins change.

When inserting first data directly in Mongo CLI for the first time, the view get updated with new data.

db.parties.insert({name: 'Party Name', description: 'Party Desc'});

But after inserting second data using Mongo CLI or browser, the first data just gone.

I'm testing the socially-step04

Session bind is great. Because I use it to store the state of users which is sharing in different templates. So I think we need a simple way to do this in different controllers with angular-meteor. Furthermore I suggest more example comparing the meteor native way and angular's. Thank you.

Add the option to choose if to use JQuery or AngularJS's JQuery lite: More details here: #1

I code a demo ui-calendar with angular-meteor, which can not work properly. Could you take a look? Thank you very much! What's wrong? It frustrated me two weeks.
https://github.com/wuxianliang/ui-calendar-angular-meteor

Encapsulating interaction with Meteor collections / methods etc inside one or more Angular Services.

I prefer to keep my Angular controllers as simple as possible, focused only on defining the $scope models and UI - specific behaviour methods. Any backend - specific work should be encapsulated in a Service layer. This has several advantages, such as testing (mock out the Service when testing the Controller), and theoretical ability to swap out Meteor for another backend (hello, open-sourced Firebase in the future?!). So, a tutorial to demonstrate ways of using the angular-meteor services ($collection, $users etc) wrapped in Angular services, rather than directly attaching to a controller $scope, would be very useful for more advanced front-end architectures.

In production:

Error: [$injector:unpr] Unknown provider: eProvider <- e http://errors.angularjs.org/1.3.1/$injector/unpr?p0=eProvider%20%3C-%20e

...odeURIComponent(a(arguments[u]));return new e(s)}}function i(t){if(null==t||k(t)...

Before compression:
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// //
// packages/urigo:angular/packages/bower/angular/angular.js //
// This file is in bare mode and is not in its own closure. //
// //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
/** // 1

• @license AngularJS v1.3.1 // 2

• (c) 2010-2014 Google, Inc. http://angularjs.org // 3

• License: MIT // 4
  */ // 5
  (function(window, document, undefined) {'use strict'; // 6
  // 7
  ......

  return new ErrorConstructor(message); // 80

......

In the 80th of angular.js , there is something wrong，Error: [$injector:unpr] Unknown provider: eProvider <- e

We have a meteor 0.8.x app that is just running for the past month which uses loneleeandroo/ngMeteor.

However now it needs further developing and therefore there is no real way around an upgrade to Meteor 1.0. From what we read so far and some tests loneleeandroo/ngMeteor is not really compatible with Meteor > 0.9.x and this looks like a promising alternative project. But simply replacing packages and some adjustments don't seem sufficient. After replacing the packages in our test we replaced the initialization ngMeteor.requires.push('OurApp'); with angular.bootstrap(document, ['OurApp']); and added angular-meteor to our app: angular.module('OurApp', [ 'angular-meteor', '...']). The first error we got hit by is a "Uncaught TypeError: The first argument of $collection must be a Meteor.Collection object" in angular-meteor-collections.js:9.

As not developing meteor for some month seems like ages atm, some basic questions to people who are currently up to date with Meteor and angular-meteor before we dig further:
How much adjustments/refactoring needs to be done to make a ngMeteor project compatible with angular-meteor? (Not in terms of time anything relative to the project size but in terms of how much differences are between both projects.)
Can it be worth it or are there other alternatives for old ngMeteor projects?
Is there maybe somewhere a guid/simple blog entry of people who did such an upgrade with some helpful tips for getting around common errors?

Information would be much appreciated!

Hi there,

I've set up a Meteor.publisher which returns a subset of entries from the whole collection that is referenced, however when I use $collection.bind, and pass the publisher name to the publisher parameter, the entire collection is still returned (rather than the subset).

I've tested the query in mongo db and it is correctly returning the subset of entries, so it seems like the publisher parameter isn't correctly binding to the publisher name.

Here's the publisher code which runs on the server:

Meteor.publish("openRequestsCollection", function(){
if(Roles.userIsInRole(this.userId, 'admin') || Roles.userIsInRole(user, 'tech')){
return HelpRequestCollection.find(
{
$and: [
{
$or: [
{"techId": -1},
{"techId": {$exists: false}}
]
},
{
$and:[
{"helpRequestStatus": {$ne: "Picked up"}},
{"helpRequestStatus": {$ne: "Complete"}}
]
}
]
}
);
}
});

Here's the bind code, which runs in a controller:

$collection(HelpRequestCollection).bind($scope, 'openRequests', true, 'openRequestsCollection');

And here's the code to initiate the collection:

HelpRequestCollection = new Mongo.Collection("helpRequestCollection");

It's worth noting that I have set up three different publishers for this collection, each returning a different subset of entries, and each bind just returns the entire collection.

I need the updated 'meteorInclude' directive in my project.
it added
$compile(element.contents())(scope);
What is the correct\best way to get this into my local project?
For that matter .. I would like to be able use this repository and not atmosphere .. which is going to always be out of date.

thks!

When I am reading in the Docs site, I would like to zoom in to 150% in Chrome which looks clearer in this case. So I think the font-size is too small.

Is the controller as vm syntax possible with angular-meteor?
thanks
paul.

You might want to run some kind of filter on the data before it's returned to the view. But you would still want the data to be reactive. I guess you could accomplish this by binding a whole collection to $scope and then watching it, filtering on change, but that seems like an unnessecary amount of watchers.

I'd propose that you make some kind of binding that binds a scope variable to the return value of a function, and this function could be reevaluated with Meteor.autorun, or something like that.

I am not a Meteor professional so there might be a smarter way. I would like to use this in order to avoid using the Blaze templating engine at all, but still use functionality similar to Template.myTemplate.methods

I'll do meteor update. That update pack urigo:angular from 0.4~ to 0.5.7

But now i see that in console:
TypeError: Cannot read property 'then' of undefined
at Object.ngIfWatchAction as fn
at Scope.$digest (http://localhost:3000/packages/urigo_angular.js?a8f86b8c424846839431f94b241fd8725bbccfee:13984:29)
at Scope.$apply (http://localhost:3000/packages/urigo_angular.js?a8f86b8c424846839431f94b241fd8725bbccfee:14246:24)

in this case
if (block) { // 23082
previousElements = getBlockNodes(block.clone); // 23083
$animate.leave(previousElements).then(function() { // 23084
previousElements = null; // 23085
}); // 23086
block = null;

sorry for bad english

The idea is brilliant, but I think you should get into more advanced CRUD / reactive scenarios.

When my app doesn't have urigo:ionic package. The angular work just fine.
But when I am adding that package to my project, angular being error.
note: I am using meteor 0.9.4

Any Idea? Thanks

Hi @Urigo ,

I really like the way you have implemented the angular-meteor project. I think it's a beautiful integration. Everything works seamlessly so far. However, I really would like to use Famo.us. What's the suggested approach for this. I see that you said you might update the tutorials to use either Famo.us or Polymer Project. Do you have a timeline for this?

If not we would really like to start using famous/angular and it seems like your project is the best place to start.

We really appreciate any input, thanks.

I am not sure if I am doing it right, but how do you use angular-meteor with collectionFS?

If I try to bind to a collectionFS object (using gridFS for storage) it throws an error that the first parameter needs to be a meteor.Collection.

I declare my model as such:

SomeCollection = new FS.Collection('SomeCollection', {
  stores: [new FS.Store.GridFS("someCollection")]
});

in my controller I add this line:

angular.module('myApp').controller('myCtrl', function($scope, $collection){
   $collection(SomeCollection).bind($scope,'someCollection',true,true);
});

Currently, I have this:

if Meteor.isClient
  ngMeteor.controller 'Idle', ['$scope', '$collection', ($scope, $collection) ->

    $collection(share.IdlePlayers)
    .bind $scope, 'players'

    $scope.activePlayers = ->
      angular.forEach $scope.players, (player) -> console.log player
      return $scope.players
  ]

.. and in my HTML:

        <div class="col-md-3 col-sm-3 col-xs-6" ng-repeat="player in activePlayers()">
            <div class="small-box bg-blue">
                <div class="inner">
                    <h3>Level [[player.level.__current]]</h3>
                    <p>[[player.professionName]]</p>
                </div>
                <a href="#" class="small-box-footer">
                    [[player.name]] <span class="fa fa-arrow-circle-right"></span>
                </a>
            </div>
        </div>

No display, and the collection seems to have a size of 0... however, in my DB, there's 22 records.

Walk through some examples on how to migrate from a typical AngularJS - based application build chain (grunt / bower / gulp) to Meteor, including:

• Strategies on using 3rd party Angular modules in a angular-meteor application:
  • When & how to wrap an angular module as a Meteor package (e.g. pick any popular angular module and show steps needed to include / wrap)
  • When & how an angular module can be added directly to a Meteor application without wrapping (adding to /lib folder?)
  • Other considerations: (e.g. Need to change Angular double-curly-braces to double-square-brackets)
• Strategies for using Meteor packages in an angular-meteor application:
  • Packages that use Blaze / UI
  • Packages that have client & server components: how to integrate with Angular structure
• Tooling:
  • Use of meteor-bower for importing bower.json - specified Angular packages

It's great tool to combine Meteor and Angular together. But I'm wondering how to add other Angular package workting with Angular-meteor? such as https://github.com/danielstern/ngAudio

Hi!

I have a pretty intensive app that needs to always be subscribed to a lot of collections. My solution was to abstract them into a service, like so:

  angular.module('kurea.web').service 'IdleCollections', ->

    IdlePlayers = new Mongo.Collection "players"
    IdlePlayerEvents = new Mongo.Collection "playerEvents"
    IdleAnalytics = new Mongo.Collection "analytics"
    IdleMonsters = new Mongo.Collection "monsters"
    IdleItems = new Mongo.Collection "items"

    { IdlePlayers, IdlePlayerEvents, IdleAnalytics, IdleMonsters, IdleItems }

Now this is great, but I'm not certain this is the best way to do it. However, since not every page needs every collection, I tried just instantiating each collection in the controller that needs it. However... this appears to make everything not work.

So my question is, is it safe to just inject a service like this as necessary? Or is it super bad for performance?

I tried to used Angular-meteor and Cordova together, to build iOS applications. But it seems that UI didn't reflect data change, like 'codeformat' until I re-click 'Scan' button.

Below is HTML:

Scan [[ codeformat ]]

JavaScript:

angular.module("qrcode").controller("ScanInCtrl", ['$scope', '$collection',
function($scope){
$scope.codeformat = "QRCode";
$scope.items = [];
$scope.cur_qrcode = "";
$scope.cur_barcode = "";
$scope.scan = function(){
cordova.plugins.barcodeScanner.scan(
function (result) {
console.log(result.format);
if (result.format == 'QR_CODE') {
$scope.codeformat = "BarCode";
$scope.cur_qrcode = result.text;
} else {
$scope.codeformat = "QRCode";
$scope.cur_barcode = result.text;
$scope.items.push({'qrcode': $scope.cur_qrcode, 'barcode': $scope.cur_barcode});
}
},
function (error) {
console.log("Error");
}
);
};
}
]);

https://atmospherejs.com/urigo/ngmeteor points to this repo, and so does
https://atmospherejs.com/urigo/angular

What are the high-level differences between the two?

@Urigo ,

I've been noticing something quite odd and was hoping for some clarification or input on the matter. $rootScope.currentUser is often returned 'undefined' when refreshing the page and is very reproducible. I'm leveraging, angular-meteor, meteor-ionic, and meteor-angular-ui-router.

The associate error message in the console:

TypeError: Cannot read property 'then' of undefined
    at Object.ngIfWatchAction [as fn] (http://localhost:3000/packages/urigo_angular.js?bb1ce5cfe93e9dc2a14be7be84b4994234f5c846:23116:47)
    at Scope.$digest (http://localhost:3000/packages/urigo_angular.js?bb1ce5cfe93e9dc2a14be7be84b4994234f5c846:13984:29)
    at Scope.$apply (http://localhost:3000/packages/urigo_angular.js?bb1ce5cfe93e9dc2a14be7be84b4994234f5c846:14246:24)
    at http://localhost:3000/packages/urigo_angular.js?bb1ce5cfe93e9dc2a14be7be84b4994234f5c846:27149:43
    at Tracker.Computation._compute (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:288:36)
    at Tracker.Computation._recompute (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:302:14)
    at Tracker.flush (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:430:14) angular.js:11339

However, $rootScope.currentUser is always defined if I go back then forward. Just on refreshing it often reverts to undefined as if it just doesn't set it. This is incredibly frustrating.

Hey Uri, this is a very nice and rich package. I was recently notified that the simple collection binding model = collection.find().fetch();, which I used in my Medium article, doesn't scale well for large fetched collections, since it will make Angular mark all items dirty in digest cycle. I wrote a very simple improved version to reuse unchanged items: https://gist.github.com/zefei/db15affe9848ef00cd67. I didn't test this extensively but I think it works. Hope this helps if you encounter such problems.