Question

我将从我对这两个框架的新手开始，但我对我到目前为止学到的东西感到非常兴奋。我一直在做的事情有了很大改进。

我想在表格中显示一组项目（旅行路线）。我只想在表格中显示几个行程字段，因为有很多字段。当您编辑/添加项目时，我想显示一个表单来编辑不同区域或模态中的所有字段，显然当您保存列表/表时会更新。我不确定构建这个的最好方法，我希望有人可以指出我正确的方向，甚至更好的类似的例子。到目前为止，我的搜索结果很短。我似乎应该使用列表的复合视图，但如何最好地将所选项目传递给要编辑的是我有点被困在哪里。任何指针都会非常感激。

Answer 1

我会为表使用CompositeView，并为表单使用ItemView。显然这是不完整的，但它应该让你开始。实际上......我有点被带走了。

以下是对基本结构的一些想法。流。实施细节，包括模板，我将留给您。

表/行视图：

// each row in the table
var RowView = Backbone.Marionette.ItemView.extend({
  tagName: "tr"
});

// This could be a table tag itself, or a container which holds the table.
// You want to use a CompositeView rather than a CollectionView so you can
// render the containing template (the table tag, headers), and also, it works
// if you have an actual collection model (ItineraryList, etc).
var TableView = Backbone.Marionette.CompositeView.extend({
  itemView: RowView,
  collectionEvents: {
    "change": "render"
  }
});

表单视图：

// This would be a simple form wrapper that pulls default values from
// its model.  There are some plugins in this space to help with
// forms in backbone (e.g. backbone-forms), but they may or may not
// be worth the bloat, or might be tricky to work with Marionette.
var FormView = Backbone.Marionette.ItemView.extend({
  events: {
    "submit form": "onFormSubmit"
  },

  data: function () {
    // here you'd need to extract your form data, using `serializeArray`
    // or some such, or look into a form plugin.
    return {};
  },

  // Clearly this is incomplete.  You'd need to handle errors, 
  // perhaps validation, etc.  You probably also want to bind to 
  // collection:change or something to close the formview on success.
  //
  // Re-rendering the table should be handled by the collection change 
  // event handler on the table view
  onFormSubmit: function (e) {
    e.preventDefault();

    if (this.model.isNew()) {
      this.collection.create(this.data());
    } else {
      this.model.save(this.data());
    }
  }
});

在加载过程的某个地方，您将实例化一个集合并显示它：

// first off, somewhere on page load you'd instantiate and probably fetch
// a collection, and kick off the tableview
var itineraries = new Itineraries();
itineraries.fetch();

// For simplicity I'm assuming your app has two regions, form and table, 
// you'll probably want to change this.
app.table.show(new TableView({collection: itineraries}));

为编辑和新行程链接制作路线是有道理的，但如果您的表单处于模态中，则可能需要绑定到按钮点击。无论哪种方式，你打开这样的形式：

// in the router (/itineraries/edit/:id) or a click handler...
function editItinerary(id) {
  var itinerary = itineraries.get(id);
  // then show a view, however you do that.  If you're using a typical 
  // marionette region pattern it might look like
  app.form.show(new FormView({
    collection: itineraries, 
    model: itinerary
  });
}

// once again, a route (/itineraries/new), or a click handler...
function newItinerary() {
  app.form.show(new FormView({
    collection: itineraries, 
    model: new Itinerary()
  }));
}

使用Backbone.js / Marionette编辑列表

1 个答案: