2

JSON を jquery-fullcalendar に渡す必要があります。JSON をフェッチするソースとして use url を渡すことはできますが、すでに ember-data ストアにロードされているデータを JSON に変換して fullcalendar に渡すことをお勧めします。カレンダーまたは残り火で作成されたものは常に同期されます。

モデルとして 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 によって作業コードが調整されたため、複数ではなく 1 つのカレンダーのみが表示されます。

最終的な作業回答

didInsertElement と jquery fullcalendar の初期化をコントローラーからビューに戻しましたが、すべてが思い通りに機能します。

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/および fullcalendar の色を変更する: http://jsfiddle.net/A56LN/43/。ember-model をデータストアとして使用する予定をサイドローディングするイベント: http://jsfiddle.net/duHfN/15/。ember-data をデータストアとして使用する同じコード: http://jsfiddle.net/duHfN/14/

どうもありがとう。

4

1 に答える 1

2

I reproduced your non-working fiddle locally. In the console I get the following error message:

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

Having had a good look at your code, I suggest you change tact a little. The way you're trying to do things doesn't quit fit ember conventions (IMHO). I recommend you setup a page for appointments and for events as as follows.

App.Router.map(function() {
  this.route('appointments');
  this.route('events');
});

Then in your appointments route you add the model:

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

This way you know you're only dealing with you appointments stack (route/controller/model/view) and can continue debugging. The way you've got the project setup now, there is too much room for error in throwing your different views into your application.

Once you've got the appointments working, you can always use what you have and render the different views as partials inside your application. In this way you will have cleaned up your code and used the ember conventions, while still keeping everything on one page.

Update:

I've put up a fiddle which you can look at for an example of what I mean. The events live under /events and calendar under /calendar. I haven't got the fiddle to work nicely, but if you copy it to your machine you'll see that browsing to events gives you the events, and browsing to calendar gives you the calendar with the events populated.

An aside, I noticed that you didn't include ember data as part of your external js. This could just be that there's no available CDN (I haven't checked), but be sure to include the ember-data.js library in your code. The model and fixtures depend on that library. You can download the latest version from here.

Update 2: Here is a new fiddle. It redirects to the events view, which displays the events and the calendar with all the events present. The calendar should also update as soon as the events update. I had to move the rendering into the controller to make that happen

于 2013-06-03T06:46:38.430 に答える