为 ember js 添加第三方 java 脚本

Question

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

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/中寻找余烬插件

所以如果只是想使用 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">

如何设置余烬使用插件，

• jquery.js 已经捆绑在 Ember 中，因此不需要特殊处理。
• 将responsive-calendar.js文件放在app-name/vendor/responsive-calendar.js和app-name/ember-cli-build.js文件中 icludeapp.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 -->

在我的日历.js文件中，

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

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