我需要将 JSON 传递给 jquery-fullcalendar，虽然我可以传递 use url 作为从中获取 JSON 的源，但我更愿意将已加载到 ember-data store 中的数据转换为 JSON 并将其传递给 fullcalendar，因此，对日历或 Ember 所做的任何更改都将始终保持同步。
当我使用 ember 对象作为模型并在内存中创建数据时，它的工作原理如下: here 。但是当我通过 ember-data rest-adapter 加载数据并尝试使用相同的代码将其转换为 JSON 时，它失败了。
这是failing JSfiddle 。
当使用 ember 对象创建数据时，我可以通过手动创建 json 来使其工作，如图所示 here 并粘贴在下面:
当我使用 Ember 对象作为模型时，它会生成一个被 fullcalendar 接受的有效 JSON。但是，如果我将其更改为使用 ember-data 模型，即 App.Event = DS.Model.extend 并相应地更改属性以使用 DS.attr，而 Controller 保持不变，它将无法生成 fullcalendar 接受的有效 json。
App.Event = Em.Object.extend( {
title: null,
start: null,
allDay: null,
asJSON: function() {
return {
title: this.get('title'),
start: this.get('start'),
allDay: this.get('allDay')
};
}.property('title', 'start', 'allDay')
});
使用 ember 对象时有效但使用 ember-data 时无效的 Controller
App.EventsController = Ember.ArrayController.extend({
content: [
App.Event.create({
title: 'event1',
start: '2013-06-06'
})
],
contentAsJSON: function() {
return this.get('content').map(function(event) {
return event.get('asJSON');
});
}.property('content.[]')
});
这就是我将生成的 JSON 从上述模型和 Controller 传递到 jquery-fullcalendar 的方式。这里json被fullcalendar识别并在日历上显示事件。你可以看到它here 。
App.CalendarView = Em.View.extend({
templateName: 'calendar',
didInsertElement: function() {
this._super();
var controller = this.get('controller');
var calendarJSON = controller.eventJSON();
console.log(calendarJSON);
this.$().fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
} ,
editable: true,
events: calendarJSON
});
}
});
如果我将 ember-object 转换为 ember-data 的 DS 模型，如何生成 json。到目前为止，仅将 ember 对象替换为 ember-data 是行不通的。
更新
工作 jsfiddle 基于@Gevious的回答。
通过@Gevious调整了工作代码，因此它将仅显示一个日历而不是多个: jsfiddle
最终工作答案
我将 didInsertElement 和 jquery fullcalendar 的初始化从 Controller 移回到 View 中，一切仍然按照我想要的方式工作。
使用 Ember-data 作为数据存储: http://jsfiddle.net/C4SD7/5/ 和 http://jsfiddle.net/C4SD7/3/ 。使用 Ember-Model 作为数据存储: http://jsfiddle.net/C4SD7/6/ 除了 fullcalendar 之外，这里还有一个使用 datepicker 与 emberjs 的链接:http://jsfiddle.net/jsjyw/3/ 。将 Momentjs 与日历结合使用: http://jsfiddle.net/M8XLF/7/并更改 fullcalendar 的颜色:http://jsfiddle.net/A56LN/43/ 。使用 ember-model 作为数据存储的事件侧载约会:http://jsfiddle.net/duHfN/15/ 。使用 ember-data 作为数据存储的相同代码:http://jsfiddle.net/duHfN/14/
非常感谢。
最佳答案
我在本地复制了您无法正常工作的 fiddle 。在控制台中，我收到以下错误消息:
Uncaught Error: assertion failed: an Ember.CollectionView's content must implement Ember.Array. You passed <(generated appointments controller):ember306> ember-1.0.0-rc.3.js:52
Uncaught Error: assertion failed: Emptying a view in the inBuffer state is not allowed and should not happen under normal circumstances. Most likely there is a bug in your application. This may be due to excessive property change notifications. ember-1.0.0-rc.3.js:52
仔细查看您的代码后，我建议您稍微改变一下策略。你尝试做事的方式不符合 Ember 惯例(恕我直言)。我建议您设置一个约会和事件页面，如下所示。
App.Router.map(function() {
this.route('appointments');
this.route('events');
});
然后在您的约会 route 添加模型:
App.AppointmentsRoute = Em.Route.extend({
model: function() return App.Event.model();
});
这样您就知道您只处理约会堆栈(路由/ Controller /模型/ View )并且可以继续调试。按照您现在的项目设置方式，将不同的 View 放入应用程序中存在太多出错的空间。
一旦您完成了约会，您就可以随时使用您所拥有的内容并将不同的 View 呈现为应用程序中的部分 View 。通过这种方式，您将清理代码并使用 ember 约定，同时仍将所有内容保留在一页上。
更新:
我已经发布了fiddle你可以看一下这个例子来说明我的意思。事件位于/events 下，日历位于/calendar 下。我的 fiddle 不能很好地工作，但是如果您将其复制到您的计算机上，您会发现浏览到事件会为您提供事件，而浏览到日历则会为您提供填充了事件的日历。
顺便说一句，我注意到您没有将 ember 数据包含在外部 js 中。这可能只是因为没有可用的 CDN(我没有检查过)，但请务必在代码中包含 ember-data.js 库。模型和装置取决于该库。您可以下载最新版本from here .
更新 2: Here is a new fiddle 。它重定向到事件 View ，该 View 显示事件和包含所有当前事件的日历。事件更新后，日历也应立即更新。我必须将渲染移动到 Controller 中才能实现这一点
关于ember.js - 如何在 Ember 1.0.0-RC3 中将 emberjs 对象转换为 JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16826023/