我甚至不确定从哪里开始。我有一个相对简单的流星应用程序(http://www.vertexshaderart.com)。它使用铁路由器进行路由。主要路线/
似乎是一个非常正常的情况。显示最新的8条信息。显示8条最受欢迎的帖子sort: {likes: -1}
。
当我尝试在手机上观看时,它只能工作约1次,可能更少。该站点显示,主模板清晰呈现,至少有一个子项呈现,但等待数据的模板永远不会显示。他们有{{#if Template.subscriptionsReady}}
封套。或者更确切地说,包装器内的部件永远不会出现。我猜测由于某些原因订阅从未在移动设备上完成。事实上,我一直在键入和编辑此响应的整个10多分钟,我的手机坐在我的电脑旁边试图加载页面。它一直坐在那里装载> 10分钟,iOS状态栏中的数据微调器不断旋转。
但是,当我尝试调试它时,它始终有效(或至少到目前为止)。它在iPhone模拟器中工作正常。如果我通过WiFi直接连接到我的开发机器,它工作正常。就像我说它在移动设备上工作1或5次左右。我已经尝试连接到调试器USB然后远程调试Safari,但是当我这样做时它似乎总能工作。
您可能认为这是一个糟糕的移动连接,但我查看的其他所有网站似乎都运行良好。 Slashdot,Ars,Hackernews,GMail(网站),Facebook的网站(不是app),Reddit。等
知道如何调试这个吗?或者这是一个已知的问题?
这是我的代码
Router.route('/', {
template: 'front',
});
-
<template name="front">
<header>
<div>
<div class="buttons">
{{> userinfosignin}}
</div>
{{> logo}}
</div>
</header>
<div class="container">
<div class="gallery">
{{> artselection sort="newest" limit="8"}}
{{> artselection sort="popular" limit="8"}}
</div>
</div>
<template name="artselection">
<div class="sortcriteria">
<div class="title">
<div>{{sort}}:</div><div class="right"> <a href="/gallery/1/?sort={{sort}}">see all</a></div>
</div>
<div class="artgrid">
{{#if Template.subscriptionsReady}}
{{#each art}}
{{> artpiece}}
{{/each}}
{{/if}}
</div>
</div>
</template>
<template name="artpiece">
<div class="artpiece">
<a href="/art/{{_id}}">
<img class="thumbnail" src="{{screenshotLink.url}}" />
</a>
<div class="galleryinfo">
<div class="galleryname">
<a href="/art/{{_id}}">“{{name}}”</a>
<a href="/user/{{username}}">by: {{username}}</a>
</div>
<div>
<a href="/art/{{_id}}">
<span class="views">{{views}}</span><span class="likes">{{likes}}</span>
</a>
</div>
</div>
</div>
</template>
除了{{if Template.subscriptionsReady}}
以下是该模板的代码
// in a client section
Template.artselection.onCreated(function() {
var instance = this;
instance.autorun(function() {
var sort = getSortingType(instance.data.sort);
instance.subscribe('artSelection', sort, parseInt(instance.data.limit));
});
});
Template.artselection.helpers({
art: function() {
var instance = Template.instance();
var sortField = getSortingType(instance.data.sort);
var sort = {};
sort[sortField] = -1;
var options = {
sort: sort,
limit: parseInt(instance.data.limit),
};
return Art.find({}, options);
},
});
// in a sever section
Meteor.publish("artSelection", function(sortField, limit) {
var find = {
private: {$ne: true},
};
var sort = {};
sort[sortField] = -1;
var options = {
fields: {settings: false},
sort: sort,
limit: limit,
};
return Art.find(find, options);
});
function getSortingType(sort) {
switch (sort) {
case "mostviewed":
return "views";
case "newest":
return "modifiedAt";
case "popular":
default:
return "likes";
}
}
注意:Art
是一个与任何教程中Posts
几乎相同的集合。数据很小。仅_id
,username
,owner
,title
,createdAt
,modifiedAt
,likes
,views
,{ {1}}。这是关于它和一个字段hasSound
这是一个字符串,最多2-3k但我在发布方法中排除该字段。实际上,在桌面上查看时检查Chrome调试器中的帧,看起来在首页完全呈现之前,只有大约12k的数据通过websocket向下发送。换句话说,这不是发送大量数据的问题。
我正在使用Meteor 1.2.1。
我发现问题实际上是Chrome's Data Saver feature。我做了一个错误的假设,因为两者都是WebKit,因此在Safari上进行远程调试可以帮助我找到问题,但Chrome正在它的嵌入式WebKit视图的幕后进行奇特的网络。关闭数据保护功能,它开始工作。
根据Google的说法,您可以通过添加标题
来禁用服务器端的数据保护功能settings
所以现在我会尝试将该标题添加到我的网站。否则我很确定谷歌希望它能够正常工作,所以我filed a bug
答案 0 :(得分:0)
我绝对不确定它会解决你的问题,但是你试试&#34; waitOn&#34;铁路由器的功能(只是为了帮助您找到问题)?
显然,您希望确保使用此块完全建立您对数据的订阅:
{{#if Template.subscriptionsReady}}
{{#each art}}
{{> artpiece}}
{{/each}}
{{/if}}
您是否可以尝试创建指向具有问题的模板的路线,并检查数据是否在此路线上加载?
类似下面的代码并查看问题是否仍然存在?
Router.route('/art_selection', {
name: 'artselection',
waitOn: function () { return Meteor.subscribe('artSelection'); },
data: function () {
return {
art: Art.find(),
}
}
});
如果它在路由上运行良好而不在主页上运行,那么我猜你的模板不会在第一次渲染时等待你的订阅准备就绪,并且在订阅完成后不再重新渲染。