Ember 应用和谷歌爬虫答案

【问题标题】：Ember app and google crawlerEmber 应用和谷歌爬虫
【发布时间】：2016-05-27 14:36:44
【问题描述】：

我正在尝试使我的 ember 应用程序可抓取。据我所知，谷歌现在支持 JS、CSS 和 AJAX（从 2015 年 10 月开始）。但是当我通过“Fetch as Google”测试我的网站时，我得到了带有背景的空白页面：https://gyazo.com/2b28487ac1a25e11e2e87888779e3f2a

当然我的内容和页面看起来完全不同：https://gyazo.com/009a5a9719f80aef70fc22bc3d777cba

我做错了什么？

【问题讨论】：

标签： javascript ajax ember.js web-crawler google-crawlers

【解决方案1】：

您可以使用 Ember 快速启动 - https://www.ember-fastboot.com/ 或者使用http://www.emberjsseo.com/之类的服务

祝你好运！

【讨论】：

很遗憾，由于环境限制，我无法使用 FastBoot。其实我已经看过不同的为爬虫提供服务器渲染的在线服务，但突然我看到了这个：discuss.emberjs.com/t/how-to-build-a-sitemap/10655/6。所以我得出结论，谷歌爬虫可能会索引我的应用程序。

【解决方案2】：

经过一天的调查，我发现了两个阻止爬取的问题。

1.输入验证组件。

import Ember from 'ember';

const {
  computed,
  observer,
  defineProperty,
  run
} = Ember;

export default Ember.Component.extend({
  classNames: ['form-group', 'has-feedback', 'validated-input'],
  classNameBindings: ['isValid:has-success', 'showErrorClass:has-error'],
  isValid: false,
  model: null,
  value: null,
  rawInputValue: null,
  type: 'text',
  valuePath: '',
  placeholder: '',
  attributeValidation: null,
  isTyping: false,

  didValidate: computed.oneWay('targetObject.didValidate'),

  showErrorClass: computed('isTyping', 'showMessage', 'hasContent', 'attributeValidation', function() {
    return this.get('attributeValidation') && !this.get('isTyping') && this.get('showMessage');
  }),

  hasContent: computed.notEmpty('rawInputValue'),

  isValid: computed.and('hasContent', 'attributeValidation.isValid'),

  isInvalid: computed.oneWay('attributeValidation.isInvalid'),

  inputValueChange: observer('rawInputValue', function() {
    this.set('isTyping', true);
    run.debounce(this, this.setValue, 500, false);
  }),

  showMessage: computed('attributeValidation.isDirty', 'isInvalid', 'didValidate', function() {
    return (this.get('attributeValidation.isDirty') || this.get('didValidate')) && this.get('isInvalid');
  }),

  setValue() {
    this.set('value', this.get('rawInputValue'));
    this.set('isTyping', false);
  },

  init() {
    this._super(...arguments);
    var valuePath = this.get('valuePath');
    defineProperty(this, 'attributeValidation', computed.oneWay(`model.validations.attrs.${valuePath}`));
    this.set('rawInputValue', this.get(`model.${valuePath}`));
    defineProperty(this, 'value', computed.alias(`model.${valuePath}`));
  }
});

我用更新的替换了这个组件。

2.这段代码（我是为了性能优化写的）：

ingredients: function() {
    var self = this;
    return DS.PromiseArray.create({
      promise: new Promise((resolve, reject) => {
        let loadedIngredients = self.store.peekAll('ingredient');
        if (loadedIngredients && loadedIngredients.get('length') > 0) {
          let mappedIngredients = self.get('recipe').get('ingredientsWithQuantities').map(function(item) {
            return {
              name: self.store.peekRecord('ingredient', item.ingredientId).get('name'),
              quantity: item.quantity
            };
          });
          resolve(mappedIngredients);
        } else {
          this.store.findAll('ingredient').then(function() {
            let mappedIngredients = self.get('recipe').get('ingredientsWithQuantities').map(function(item) {
              return {
                name: self.store.peekRecord('ingredient', item.ingredientId).get('name'),
                quantity: item.quantity
              };
            });
            resolve(mappedIngredients);
          })
        }
      })
    });
  }.property('recipe.ingredientsWithQuantities')

我修复了这两个问题，现在 google bot 能够呈现我的应用程序。

【讨论】：