当前位置: 首页 > 软件库 > 程序开发 > >

ember-page-title

Page title management for Ember.js Apps
授权协议 MIT License
开发语言 JavaScript
所属分类 程序开发
软件类型 开源软件
地区 不详
投 递 者 邵博远
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

ember-page-title CI

This addon provides a helper for changing the title of the page you're on.

Installing via ember-cli

ember install ember-page-title

Compatibility

  • Ember.js v3.16 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above
Fastboot vs Non-Fastboot Notes

Post Install Setup Notes

As of v3.0.0 this addon maintains the page title by using the <title> tag in your document's <head>. This is necessary for FastBoot compatibility.

Non-fastboot apps should keep the <title> tag in index.html to ensure that the initial page is valid HTML. The title will be removed and replaced when your app boots.

Fastboot apps MUST remove the <title> tag from index.html. As of v6.0.0 this is done automatically if you use ember install ember-page-title to install this addon. Can also be run manually using ember g ember-page-title to update the title if FastBoot is installed.

Digging in

Visit the Docs site

API

{{page-title}} Helper

attribute type default description
separator string " | " Which separator should be displayed after this instance of {{page-title}}
prepend boolean true If the token should be prepended or appended to the list of tokens
replace boolean false Replace all previous elements with the active
front boolean false If the token should always be in the beginning of the resulting title.

These defaults are configurable in config/environment.js:

// config/environment.js

module.exports = function (environment) {
  let ENV = {
    pageTitle: {
      replace: true,
    },
  };

  return ENV;
};

page-title Service

If you want to be notified when the page title has been updated, you can extend and override the page-title service and provide your own titleDidUpdate hook. The titleDidUpdate hook receives the new title as its sole argument.

// app/services/page-title.js

import EmberPageTitleService from 'ember-page-title/services/page-title';

export default class PageTitleService extends EmberPageTitleService {
  titleDidUpdate(title) {
    // Do something with the new title.
  }
}

Testing

assert the page title with the supplied getPageTitle test helper:

import { getPageTitle } from 'ember-page-title/test-support';

module('Acceptance | Register Page', function(hooks) {
  setupApplicationTest(hooks);

  test('visiting /register', async function(assert) {
    const registerURL = '/register';
    await visit(registerURL);

    assert.equal(currentURL(), registerURL);
    assert.equal(getPageTitle(), 'Register | Some Website');
  });
});

Upgrading notes for 5.x to 6.x

  • ember-page-title no longer requires the usage of ember-cli-head.Please remove {{head-layout}} from your application's application.hbs route template.
  • {{title}} has been removed, please rename to {{page-title}}.

Contributing

Contributors are welcome! Please provide a reproducible test case. Details will be worked out on a case-per-case basis. Maintainers will get in touch when they can, so delays are possible. For contribution guidelines, see the code of conduct.

Publishing Documentation

To publish documentation, run the following command:

ember github-pages:commit --message "update documentation"
git push origin gh-pages:gh-pages
  • 如果认真看了前面的ember101课程,相信已经有了驾驭ember 实现一个真正的应用程序的冲动,这次我们运用我们已经掌握的知识,构建一个完整的、刚好实现的博客程序。参照的书籍是ember实战。 应用程序主要有两个代码文件组成index.html 和 app.js 。实际的应用程序里,把app.js 分解成了几个.js 文件:models.js(模型)、views.js(视图)、controlle

 相关资料
  • Ember Page Objects Represent the screens of your web app as a series of objects. This ember-cli addon eases the construction of these objects for your acceptance and integration tests. http://ember-cl

  • 在本章中,让我们研究如何在Drupal中创建Front Page 。 如果您的网站上有良好的内容并希望访问者首先看到该特定内容,那么该文章必须位于首页。 Drupal为此提供了解决方案。 以下是用于创建Drupal Front Page的简单步骤。 Step 1 - 单击Content ,如以下屏幕所示。 Step 2 - 屏幕上弹出文章和页面列表。 单击edit链接,如以下屏幕所示。 Step

  • Extends Composite A container representing a single page of a NavigationView widget. Import this type with “const {Page} = require('tabris');” Properties autoDispose Type: boolean, default: true Defin

  • @Page装饰器包含IONIC_DIRECTIVE中所有的组件和指令以及Angular中的CORS_DIRECTIVES和 FORM_DIRECTIVES。所以你只需要将你自定义的指令和组件依赖进去就好。 使用方法 @Page({ template: ` <ion-content> I am a page! </ion-content> ` }) class MyPa

  • 注册小程序中的一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。 1. 参数 属性 类型 默认值 必填 说明 data Object 页面的初始数据 onLoad function 生命周期回调—监听页面加载 onShow function 生命周期回调—监听页面显示 onReady function 生命周期回调—监听页面初次渲染完成 onHide

  • 描述 (Description) page属性用于调用先前使用@page定义的页面选择器。 可能的值 (Possible Values) 《page selector》 - 使用@page的任何先前定义的页面选择器。 auto - 浏览器应根据其默认值格式化页面。 适用于 (Applies to) 所有块级元素。 例子 (Example) 这是一个例子 - <style type="text/cs