为 ember js 添加第 3 方 java 脚本

Question

我是 emebr-js 的初学者，我正在为我的大学项目创建应用程序，我正在为我的应用程序添加一些第 3 方日历，我想在此应用程序中添加一些 java 脚本这第 3 部分脚本，我尝试添加此 route > Profile.js 但不起作用，我如何为 profile.hbs[= 添加此脚本19=]

hbs 页面名称 Profile.hbs

这是我的脚本

    <script type="text/javascript">



  var calendarPicker2 = $("#dsel2").calendarPicker({
    monthNames:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    useWheel:true,
    //callbackDelay:500,
    years:0,
    months:0,
    days:3,
    showDayArrows:false,
    callback:function(cal) {

    }});

    </script>

Answer 1

我鼓励您从 https://emberobserver.com/

寻找 ember-addons

所以如果只想使用 w3widgets.com/responsive-calendar

对于此代码，

<script src="js/jquery.js"></script>
<script src="js/responsive-calendar.js"></script>
<link href="css/responsive-calendar.css" rel="stylesheet" media="screen">

如何设置 ember 以使用插件，

jquery.js 已捆绑在 Ember 中，因此无需特殊处理。
将 responsive-calendar.js 文件放入 app-name/vendor/responsive-calendar.js 并在 app-name/ember-cli-build.js 文件中包含 app.import('vendor/responsive-calendar.js')
将 responsive-calendar.css 文件放入 app-name/styles/responsive-calendar.css 并打开 app.css 并包含以下行 @import 'responsive-calendar.css';

就是这样，插件可以使用了。

如何使用,

通过运行命令 ember g component my-calendar 创建名为 my-calendar 的组件，它将创建 my-calendar.hbs 和 my-calendar.js 文件。

在my-calendar.hbs中，放置需要的标记代码，

<!-- Responsive calendar - START -->
<div class="responsive-calendar">
  <div class="controls">
      <a class="pull-left" data-go="prev"><div class="btn"><i class="icon-chevron-left"></i></div></a>
      <h4><span data-head-year></span> <span data-head-month></span></h4>
      <a class="pull-right" data-go="next"><div class="btn"><i class="icon-chevron-right"></i></div></a>
  </div><hr/>
  <div class="day-headers">
    <div class="day header">Mon</div>
    <div class="day header">Tue</div>
    <div class="day header">Wed</div>
    <div class="day header">Thu</div>
    <div class="day header">Fri</div>
    <div class="day header">Sat</div>
    <div class="day header">Sun</div>
  </div>
  <div class="days" data-group="days">
    <!-- the place where days will be generated -->
  </div>
</div>
<!-- Responsive calendar - END -->

在我的-calendar.js 文件中，

import Ember from 'ember';
export default Ember.Component.extend({
    didInsertElement() {
        this.$('.responsive-calendar').responsiveCalendar();
    }
});

就是这样。您可以在任何模板中包含我的日历组件，例如 {{my-calendar }}

为 ember js 添加第 3 方 java 脚本

Add 3rd party java script for ember js

ember.js