2

Sproutcore 2.0 を使用して、1 対多の関係のバインディングを正しくするのに苦労しています。

私のテンプレートは次のようになります。

<script type="text/x-handlebars">
  {{#collection contentBinding="HTH.projectsController.content"}}
    <h3>{{content.title}}</h3>
    {{#collection contentBinding="content.tasks"}}
    <span>{{content.title}}</span>
    {{/collection}}
  {{/collection}}
</script>

実際のコードは次のようになります。

HTH.Project = SC.Record.extend({
  title: SC.Record.attr(String),
  tasks: SC.Record.toMany('HTH.Task',{
    isMaster: YES,
    inverse: 'project'
  })
});

HTH.Task = SC.Record.extend({
  title: SC.Record.attr(String),
  project: SC.Record.toOne('HTH.Project', {
    isMaster: NO
  })
});

HTH.Project.FIXTURES = [ { guid: 1, title: 'Send man to moon', tasks: [1,2]}, 
                         { guid: 2, title: 'Master handstand', tasks: [3]}];
HTH.Task.FIXTURES    = [ { guid: 1, title: 'Find rocket',    project: 1}, 
                         { guid: 2, title: 'Find fuel',      project: 1},
                         { guid: 3, title: 'Stand on hands', project: 2}];

HTH.store = SC.Store.create().from(SC.Record.fixtures);

// Controllers

HTH.projectsController = SC.ArrayProxy.create({
  content: HTH.store.find(HTH.Project)
});

これで、タスクを更新できるようになりました。これにより、UI が更新されます。例えば：

HTH.store.find(HTH.Project).get('firstObject').set('title','Updated the title!');

ただし、新しいプロジェクトを作成してタスクを動的に追加すると、UI は新しいプロジェクトを追加しますが、オファーは追加しません。

var project = HTH.store.createRecord(HTH.Project, {title: "New" });
var task = HTH.store.createRecord(HTH.Task, {title: "New task" });
project.get('tasks').pushObject(task);

これは、バインディングが期待どおりに機能していないか、観察する必要があるプロパティにかかっていると確信しています。誰でも助けることができますか？

注: この質問は、SproutCore 2.0 が Ember.js になる前に尋ねられました。また、SproutCore 1.x データ ストアの非公式ポートも参照していますが、これは公式にサポートされている ember-data ライブラリに取って代わられています。

4

1 に答える 1

1

レコードを使用可能にするには、IDを割り当てる必要があります。

この意味は：

var project = HTH.store.createRecord(HTH.Project, {title: "New" });
var task = HTH.store.createRecord(HTH.Task, {title: "New task" });
project.get('tasks').pushObject(task);

になる：

var project = HTH.store.createRecord(HTH.Project, {title: "New" }, 123);
var task = HTH.store.createRecord(HTH.Task, {title: "New task" }, 321);
project.get('tasks').pushObject(task);

変更はUIに反映されます

于 2011-11-04T17:17:50.250 に答える