Sproutcore 2.0 一对多关系

发布于 2024-12-13 12:31:29 字数 1834 浏览 0 评论 0原文

我一直在努力使用 Sproutcore 2.0 使一对多关系的绑定正确。

我的模板如下所示:

<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 库取代。

I've been struggling to get the bindings correct for one to many relationship using Sproutcore 2.0.

My templates look like this:

<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>

While the actual code looks like:

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)
});

Now I can update tasks, and these will update the UI. For example:

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

However, if I create a new project and dynamically add a task to that the UI will add the new project, but never add any offers:

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

I'm certain this is down to a binding not working as expected, or a property that needs to be observed. Can anyone help?

NOTE: This question was asked before SproutCore 2.0 became Ember.js. It also references an unofficial port of the SproutCore 1.x data store, which has since been superseded by the officially supported ember-data library.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

不离久伴 2024-12-20 12:31:29

为了使记录可用,需要为其分配一个 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 中

In order for a record to be useable it needs to be assigned an ID.

This means that:

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

Becomes:

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);

The changes will then be reflected in the UI

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文