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

时间:2016-04-03 10:48:44

标签: javascript angularjs mongodb meteor angular-meteor

我在我的meteor应用程序中使用angular,当控制器变量中的记录在服务器上的该记录发生更改或者从db更改时,在客户端上自动更新时,我正在查看此行为本身。以下是我的代码

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 });
            }
        }]
    });

现在在上面的代码中,我发布了一个混合对象,它由this meteor包的帮助组成了两个集合。我在客户端的tableOrdersTables集合中通过Orders集合发布的数据非常完美。我对数据进行了一些处理,然后将所有数据添加到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中获得了1个在我的视图中呈现的项目。当我通过某个GUI工具(如Robomongo)直接从mongo db更改该记录中的值并更新它时,会发生这种情况,dineInArray中的相应记录会在没有我做任何事情的情况下自动更新。

我知道如果每次发生变化时都会调用辅助函数,但是生成我的数组的函数不是从帮助程序调用的。当Tracker表明订阅准备就绪时我正在调用它,因此我无法弄清楚我的阵列中的记录如何使用Server的最新值来更新自己。

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

任何帮助?

1 个答案:

答案 0 :(得分:0)

查看Meteor文档,详细说明该过程。

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

  

游标是一个反应数据源。在客户端,第一次你   在a中使用fetch,map或forEach检索游标文档   反应计算(例如,模板或自动运行),Meteor将注册   对基础数据的依赖。对集合的任何更改   更改游标中的文档将触发重新计算。至   禁用此行为,将{reactive:false}作为查找选项。

为角度控制器添加了提示:只要您直接从流星中提取数据,就无论您如何创建数据,或者如何在单独的功能中执行此操作都无关紧要; s代码中的任何位置的集合,在db。中更改时都会更新。