0

ここ数日、特定のコントローラー内で編集状態を追跡する最善の方法を見つけようとして、自分のアプリをいじくり回してきました。もちろん、問題は、これらの ObjectController が一度に複数存在し、特定の時点で編集できるのは 1 つだけであることです。以下は重要なコードです。

App.js:

var App = Ember.Application.create();

//ROUTES
App.Router.map(function() {
  this.resource('tasks', function() {
    this.resource('task', {path: ':task_id'});
  });
});

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('tasks');
  }
});

App.TasksRoute = Ember.Route.extend({
  model: function() {
    return App.Task.find();
  }
});

App.TaskRoute = Ember.Route.extend({});

//CONTROLLERS
App.TasksController = Ember.ArrayController.extend({
  isEditing: null,
  editing: false,
  newTask: function() {
    console.log('new task');
  },
  toggleEdit: function(id) {
    this.set('isEditing', id);
    if ($('#collapse' + this.get('isEditing')).hasClass('in')) {
      this.set('editing', false);
      this.set('isEditing', null);
      $('.in').collapse('hide');
    } else {
      this.set('editing', true);
      $('.in').collapse('hide');
      $('#' + 'collapse' + this.get('isEditing')).collapse('toggle');
    }
  }
});

App.TaskController = Ember.ObjectController.extend({
  needs: 'tasks',
  collapseId: function() {
    return "collapse" + this.get('id');
  }.property('id'),
  collapseHref: function() {
    return  "#collapse" + this.get('id');
  }.property('id'),
});

//VIEWS
App.ApplicationView = Ember.View.extend({
  didInsertElement: function() {
    var self = this;
    Ember.run.schedule('afterRender', function() {
      self.$('.navbar').affix({offset: -1000});
    });
  }
});

//HANDLEBARS HELPERS

//STORE DEFINITION
App.Store = DS.Store.extend({
  revision: 11,
  adapter: 'DS.FixtureAdapter'
    /*DS.RESTAdapter.extend({
      url: 'http://localhost:3000'
    })*/
});


//MODELS
App.Task = DS.Model.extend({
  summary: DS.attr('string'),
  description: DS.attr('string'),
  start: DS.attr('string'),
  end: DS.attr('string'),
  recurrence: DS.attr('string')
});

//FIXTURE DATA
App.Task.FIXTURES = [{
  id: "q5ji9chrh1hcu05dohvrf4aumc",
  summary: "Test",
  description: null,
  start: "2013-04-01T10:00:00-07:00",
  end: "2013-04-01T11:00:00-07:00",
  recurrence: "FREQ=WEEKLY;BYDAY=MO,WE,TH,FR"
}, {
  id: "mm4m3pq6icbgbl6m49jpdhi8j0",
  summary: "Test 2",
  description: "absafdaerwer",
  start: "2013-04-01",
  end: "2013-04-02",
  recurrence: null
}];

ホーム.HTML:

<!--TEMPLATES-->

<script type="text/x-handlebars">
  <div class="navbar" data-spy="affix">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
      </div>
    </div>
  </div>

  {{outlet}}
</script>

<script type="text/x-handlebars" id="tasks">
  <div class="row-fluid span8 offset2 task-list">
    <div class="space-top"><div>
    <div class="accordion" id="accordion">
      {{partial 'tasks/newTask'}}
      {{#each task in controller}}
        <div class="accordion-group">
          {{render 'task' task}}
        </div>
      {{/each}}
    </div>
  </div>
</script>

<script type="text/x-handlebars" id="tasks/_newTask">
  <div class="accordion-group">
    <div class="new-task-header accordion-heading" {{action newTask on="click"}}>
      <span class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseNew">New Task...</span>
    </div>
    <div id="collapseNew" class="accordion-body collapse">
      <div class="new-task accdion-inner">
        {{#if task.description}}
          <p>{{task.description}}</p>
        {{else}}
          <p>No description</p>
        {{/if}}
      </div>
    </div>
  </div>
</script>

<script type="text/x-handlebars" id="task">
  <div class="task">
  {{#linkTo 'task' task}}
    <div class="accordion-heading" {{action toggleEdit task.id on="click"}}>
      <span class="accordion-toggle" data-toggle="collapse" data-parent="#accordion">
        {{#if controllers.tasks.editing}}
          editing {{task.summary}}
        {{else}}
          {{task.summary}}
        {{/if}}
      </span>
    </div>
  {{/linkTo}}
  </div>
  <div {{bindAttr id="collapseId"}} class="accordion-body collapse">
    <div class="edit-task accdion-inner">
      {{#if task.description}}
        <p>{{task.description}}</p>
      {{else}}
        <p>No description</p>
      {{/if}}
    </div>
  </div>
</script>
4

1 に答える 1

2

このコードでは、複数TaskControllerの が作成されることはないと思います。に設定itemController: 'task'してみてくださいArrayController。(ここで議論し、使用している場合はここ1.0.0-rc.2で言及を参照してください。) そうすれば、その特定のタスクにプロパティを設定できます (およびedの場合は参照)。それは何かを明確にしますか？editingtasksneed

于 2013-04-05T20:12:50.840 に答える