EmberアプリとGoogleクローラ

Question

私はemberアプリケーションをクロール可能にしようとしています。私が知っているように、GoogleはJS、CSS、AJAXを2015年10月からサポートしています。私はで私のサイトをテストする場合でも、「グーグルとして取得」私は、バックグラウンドで、空のページを取得：もちろん実物で

は、コンテンツやページが完全に違って見えるしているI https://gyazo.com/2b28487ac1a25e11e2e87888779e3f2a：https://gyazo.com/009a5a9719f80aef70fc22bc3d777cba

私が間違っているのか？ https://www.ember-fastboot.com/ するか、http://www.emberjsseo.com/

幸運のようなサービスを利用 -

Answer 1

調査の日の後、クロールを防止する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') 

私は、これら二つの事を固定し、今私のアプリをレンダリングすることができボットをグーグル。

Answer 2

あなたはエンバー高速ブートを使用することができます！