自动更新控制器Angular Metroet中的记录

Auto updating records in controller Angular meteor

本文关键字:记录 Metroet Angular 更新 控制器      更新时间:2023-11-17

我在我的流星应用程序中使用angular,当服务器上的记录发生更改或从数据库本身更改时,控制器变量中的记录在客户端上自动更新时,我会看到这种行为。下面是我的代码

Client.js

(function() {
    angular.module('testApp')
        .controller('TestController', TestController);
    //inject dependencies required    
    TestController.$inject = ['$state', '$mdDialog', '$reactive', '$scope'];
    function TestController($state, $mdDialog, $reactive, $scope) {
        var vm = this;
        vm.dineInArray = [];
        // to attach the scope to reactive var
        $reactive(vm).attach($scope);
        vm.helpers({
            tables: function() {
                return Tables.find({});
            }            
        });
        var tableOrderCompSubscription = vm.subscribe('tableOrders');
        Tracker.autorun(function() {
            if (tableOrderCompSubscription.ready()) {
                createDineInArray();
            }
        });
        function createDineInArray() {
            var tempArray = [];
            var order;
            vm.tables.forEach(function(table) {
                order = Orders.findOne({ tableId: table._id });
                if (order) {
                    table.orderId = order._id;
                    table.menuItems = order.menuItems;
                }
                tempArray.push(table);
            });            
            vm.dineInArray = tempArray;
        }
    }
})();

Server.js

Meteor.publishComposite('tableOrders', {
        find: function() {
            // Find top ten highest scoring posts
            return Tables.find({});
        },
        children: [{
            find: function(table) {
                // Find post author. Even though we only want to return
                // one record here, we use "find" instead of "findOne"
                // since this function should return a cursor.
                return Orders.find({ tableId: table._id }, { limit: 1 });
            }
        }]
    });

现在在上面的代码中,我发布了一个混合对象,它由两个集合组成,并借助于这个流星包。我在客户端上获得了通过TablesOrders集合中的tableOrders集合发布的数据,这是完美的。我对数据进行了一些处理,然后将所有数据添加到createDineInArray()函数中控制器的vm.dineInArray变量中,该函数在订阅准备好时调用。下面是我使用vm.dineInArray 的html

HTML

<div flex layout="row" ng-controller="TestLayoutController as vm">
    <!--Title bar end-->
    <div layout="row" flex>
        <md-content flex layout="row" layout-wrap>
            <md-card class="table-card" md-ink-ripple ng-repeat="item in vm.dineInArray">
                <div flex layout="row" class="table-card-body" layout-align="center center">
                    <p>{{item.pending}} / {{item.quantity}}</p>
                </div>
                <div layout="row" class="table-card-footer" layout-align="center center">
                    <h4>{{ item.name }}</h4>
                </div>
            </md-card>
        </md-content>
    </div>
</div>

现在假设我在Tables集合中有1条记录,因此在dineInArray中得到一个在视图中呈现的项。当我通过Robomongo这样的GUI工具直接从mongo-db更改该记录中的值并更新它时,dineInArray中的相应记录会自动更新,而我什么都不做。

我知道,如果每次发生变化时都调用helper函数,但生成数组的函数并不是从helper调用的。当Tracker指示订阅已准备就绪时,我会调用它,因此我不知道数组中的记录是如何用服务器中的最新值更新自己的。

我可能错过了一些明显的东西,但我想知道发生这种情况的原因,以及我如何从中获益/受损

有什么帮助吗?

查看Meteor文档,该文档详细解释了该过程。

Collection.find()返回一个游标。

游标是一种反应性数据源。在客户端上,第一次在反应式计算(例如,模板或自动运行),Meteor将注册对基础数据的依赖。对集合的任何更改更改光标中的文档将触发重新计算。到禁用此行为,将{reactive:false}作为查找选项传递。

为您的角度控制器添加了提示:无论您如何创建数据,还是在单独的函数中创建数据,只要您直接从代码中的任何位置从Metroet的集合中提取数据,当数据在数据库中更改时,它都会更新。