2

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

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

这是失败的 JSfiddle。

当使用 ember 对象创建数据时，我可以通过手动创建 json 来使其工作，如下所示并粘贴如下：

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

  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-object 转换为 ember-data 的 DS 模型，我该如何生成 json。到目前为止，仅将 ember 对象换成 ember-data 是行不通的。

更新

根据@Gevious 的回答工作jsfiddle。

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

最终工作答案

我将 jquery fullcalendar 的 didInsertElement 和初始化从控制器移回视图，一切仍然按我想要的方式工作。

使用 Ember-data 作为数据存储：http://jsfiddle.net/C4SD7/5/和http://jsfiddle.net/C4SD7/3/。使用 Ember-Model 作为数据存储： http: //jsfiddle.net/C4SD7/6/ 除了 fullcalendar，这里是使用带有 emberjs 的 datepicker的链接：http : //jsfiddle.net/jsjyw/3/。将 Momentjs 与日历一起使用：http: //jsfiddle.net/M8XLF/7/并更改全日历的颜色：http: //jsfiddle.net/A56LN/43/。使用 ember-model 作为数据存储的事件侧载约会：http: //jsfiddle.net/duHfN/15/。使用 ember-data 作为数据存储的相同代码：http: //jsfiddle.net/duHfN/14/

非常感谢。

4

1 回答 1

2

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

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.Router.map(function() {
  this.route('appointments');
  this.route('events');
});

然后在您的约会路线中添加模型：

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

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

一旦你的约会工作起来，你总是可以使用你所拥有的并将不同的视图渲染为应用程序中的局部视图。通过这种方式，您将清理代码并使用 ember 约定，同时仍将所有内容保留在一页上。

更新：

我已经提出了一个小提琴，你可以看一个例子来说明我的意思。事件位于 /events 下，日历位于 /calendar 下。我没有得到很好的工作，但是如果你把它复制到你的机器上，你会看到浏览事件给你事件，浏览日历给你填充事件的日历。

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

更新 2： 这是一个新的小提琴。它重定向到事件视图，该视图显示事件和包含所有事件的日历。事件更新后，日历也应立即更新。我必须将渲染移到控制器中才能实现

于 2013-06-03T06:46:38.430 回答