输入选择中的弯曲灰烬数据记录

时间:2015-04-14 17:22:11

标签: ember.js ember-data

使用此数据结构:

App.Publisher = DS.Model.extend({
    name: DS.attr('string'),
    books: DS.hasMany('book',  {async: true})
});

App.Book = DS.Model.extend({
    title: DS.attr('string'),
    summary: DS.attr('string'),
    author: DS.belongsTo('author', {async: true}),
    publisher: DS.belongsTo('publisher', {async: true})
};

book editbook new表单中,我希望使用<input type=select>元素显示发布商。

我的问题:

1:如何将ember-data publishers记录绑定到input元素。

2:如何在要编辑的元素中选择当前图书发布者,或者如何选择新图书的默认值

3:在提交表单

时,如何将选定的发布者绑定到书中

非常感谢。

2 个答案:

答案 0 :(得分:0)

您可以在此处使用Ember的built in select view获取大部分内容。要将发布者列表绑定到视图的内容,您可能需要获取路由中的发布者列表。例如:

App.BookNewRoute = Ember.Route.extend({
  var route = this;
  var modelPromise =  new Ember.RSVP.Promise(function(resolve, reject){
  route.store.find('publisher').then(function(result){
    console.log("got the publisher list");
    // Have the new book model include the list of publishers, and a
    // selectedPub that can be used as the initial selection in the
    // drop down list, and will also be the model attribute bound to the list
    var modelObj = {'publishers': result, 'selectedPub': result[0].get('id')};
    resolve(modelObj);
  });

  return modelPromise;
});

现在,您可以在模板中使用带有选择视图的“发布商”:

{{view "select"
   content=publishers
   optionValuePath="content.id"
   optionLabelPath="content.name"
   value="selectedPub"}}

当用户提交表单时,“selectedPub”将具有该图书的发布者的ID。使用该id获取相应的发布者模型(例如):

bookController.find('publishers').filterBy('id', bookController.selectedPub)[0] )

然后将该模型设置为该书的出版商。

答案 1 :(得分:0)

这是我找到的解决方案,这非常简单。

AppBooksNewController中,我定义了一个名为publishers的属性,该属性包含我的所有选择元素。

AppBooksNewController = Ember.Controller.extend({
    publishers: function () {
        return this.store.findAll('publisher');
    }.property(),
    ...
});

在我的模板books\new中,我使用我在控制器中定义的属性以及我想要绑定的模型的属性来定义选择视图。

{{view "select" 
    content=publishers 
    optionValuePath="content" 
    optionLabelPath="content.name" 
    selectionBinding='model.publisher'
}}

就是这样,select被绑定到model.publisher。 并将在控制器操作中调用this.get('model').save()保存。

如果是新记录,我在创建新记录时链接默认发布者:

App.BooksNewRoute = Ember.Route.extend({
    model: function (params) {
        var newBook = this.store.createRecord('book');
        this.store.find('publisher', 1 ).then(function (publisher) {
            newBook.set('publisher', publisher);
        });
        return newBook;
    }
});