自动更新控制器Angular Metroet中的记录
Auto updating records in controller Angular meteor
我在我的流星应用程序中使用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 });
}
}]
});
现在在上面的代码中,我发布了一个混合对象,它由两个集合组成,并借助于这个流星包。我在客户端上获得了通过Tables
和Orders
集合中的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的集合中提取数据,当数据在数据库中更改时,它都会更新。
- 使用Dnamics CRM 2011中的JavaScript读取子网格的所有记录,而不考虑活动页面
- AngularJs对所有页面中的所有记录进行排序
- 有没有一种方法可以在控制台关闭的情况下让console.log()在IE中记录消息
- window.location替换并传递URL历史记录条目中的变量
- Javascript历史记录转换为php行
- JavaScript,PHP-用JavaScript将多个数据库记录发送到变量或表
- 猫鼬在特定记录中查找嵌套记录
- 浏览器何时记录历史记录
- 将一个表的id与另一个表中的user_id进行匹配,以获取mysql中的记录
- 更新成员数据模型中的记录列表
- 如何使用提交按钮搜索表中的记录
- 正在OrientDB中嵌入函数中的记录
- 使用Rails 3中的AJAX删除记录
- 用javascript记录传递给回调的参数的约定是什么
- 在页面上记录数据并实现pushstate()的最佳方式
- 输入类型按钮返回历史记录并返回顶部
- 我怎么能把一个错误当作未捕获的错误来记录呢
- HTML5历史记录-返回上一个完整页面按钮
- 如何使用 Backbone 将多条记录呈现到 html 表中.js .
- 自动更新控制器Angular Metroet中的记录