Ember.js 如何在Ember 1.0.0-RC3中将emberjs对象转换为JSON

我需要将JSON传递给jquery fullcalendar，虽然我可以传递use url作为获取JSON的源，但我更愿意将已经加载到ember数据存储中的数据转换为JSON并传递给fullcalendar，因此在日历或ember上所做的任何更改都将始终保持同步

当我使用ember对象作为模型并在内存中创建数据时，它的工作方式如下所示：。但当我通过ember data rest适配器加载数据并尝试使用相同的代码将其转换为JSON时，它失败了

这是

  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对象创建数据时，我可以通过手动创建json使其工作，如下图所示并粘贴：

当我使用Ember对象作为模型时，它会生成一个被fullcalendar接受的有效JSON。但是，如果我将其更改为使用余烬数据模型ie，App.Event=DS.model.extend，并相应地将属性更改为使用DS.attr，而控制器保持不变，它将无法生成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')    

});

在使用余烬对象时工作，但在使用余烬数据时不工作的控制器

  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传递给jquery fullcalendar的方法。此处，json由fullcalendar和日历上显示的事件识别。你可以看到它

  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对象转换为ember数据的DS模型，如何生成json。到目前为止，仅仅将余烬对象替换为余烬数据是不起作用的

更新

根据@Gevious的答案工作

通过@Gevious调整了工作代码，因此它将只显示一个日历而不是多个日历：

最终工作答案

我将jQueryFullCalendar的didInsertElement和初始化从控制器移回视图中，所有内容仍然按照我希望的方式工作

使用余烬数据作为数据存储：和。使用Ember模型作为数据存储：在fullcalendar旁边，这里有一个链接，用于将日期选择器与emberjs一起使用。将Momentjs与日历一起使用： 以及更改完整日历的颜色：。使用余烬模型作为数据存储的事件侧加载约会：。使用余烬数据作为数据存储的代码相同：

---

非常感谢。

我在本地复制了您不工作的小提琴。在控制台中，我收到以下错误消息：

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

然后在预约路线中添加模型：

App.AppointmentsRoute = Em.Route.extend({
  model: function() return App.Event.model();
});

这样，您就知道您只需要处理您的约会堆栈（路由/控制器/模型/视图），并且可以继续调试。按照现在的项目设置方式，将不同的视图放到应用程序中会有太多的错误空间

一旦约会成功，您就可以随时使用现有的内容，并在应用程序中将不同的视图呈现为部分视图。通过这种方式，您将清理代码并使用余烬约定，同时仍将所有内容保留在一个页面上

更新：

我举了一个例子，你可以看看这个例子来说明我的意思。事件在/events下直播，日历在/calendar下直播。我还没有很好地使用小提琴，但是如果你把它复制到你的机器上，你会看到浏览到事件会给你事件，浏览到日历会给你事件填充的日历

另外，我注意到您没有将余烬数据作为外部js的一部分。这可能只是因为没有可用的CDN（我没有检查），但请确保在代码中包含ember-data.js库。模型和装置取决于该库。您可以下载最新版本

更新2：

---

. 它重定向到“事件”视图，该视图显示事件和包含所有事件的日历。日历也应在事件更新后立即更新。我必须将渲染移到控制器中才能实现这一点

谢谢你的建议。我在我所附的JSFIDLE中有您上面粘贴的代码。您可以在App.EventsRoute下看到它，它使用这个.resource（'events'）。我不能为它们使用this.route，因为稍后我会将this.route（'new'）和其他子路由嵌套在它们下面。事件和约会都使用（路线/控制器/模型/视图）方法，但一些代码被简化，以缩短任何想要帮助的人的时间。如果您指的是在ApplicationRoute中使用controllerFor，因为{{render}}帮助程序无法从route中识别模型。我将使用您的工作小提琴，并尝试将其转换为ember数据。那才是你真正想要的，对吧？是的，那才是我想要的。谢谢你的帮助。对不起，我不知道你的答案有更新。任何时候我登录，没有看到任何消息警报，我只是离开没有经过任何东西。直到今天我才看到更新。但是JSFIDLE不起作用。谢谢，干杯。很高兴你能成功。它可能值得链接到工作提琴以供参考