Basic SC Bindings Example

main_page.js

 ...

 editingPane: MyApp.editingPane.extend({}),

 ...

statechart.js

  ...

  openView: function() {
    var nestedStore = MyApp.store.chain();
    var record = nestedStore.createRecord(MyApp.MyRecord, {
      id: -SC.Store.generateStoreKey(),
      attr1: "something",
      attr2: "another"
    });

    MyApp.editMyRecordController.set('content', record);

    MyApp.mainPage.get('editingPane').append();
  },

  saveContent: function() {
    var record = MyApp.editMyRecordController.get('content');

    /*
     * Do whatever you need to with the record OR better yet:
     * call record.store.commitChanges() to have your datasource
     * send the updates to the server.
     */

    MyApp.mainPage.get('editingPane').remove();
  }

  ...

view.js

MyApp.editingPane = SC.Pane.extend({
  layout: { ... },

  childViews: 'attr1 attr2'.w(),

  attr1: SC.TextFieldView.extend({
    layout: { ... },

    valueBinding: "MyApp.editMyRecordController.attr1"
  })

  attr2: SC.TextFieldView.extend({
    layout: { ... },

    valueBinding: "MyApp.editMyRecordController.attr2"
  }),

  saveButton: SC.ButtonView.extend({
    layout: { ... },

    title: "Save",

    target: MyApp.statechart,
    action: "saveContent"
  })
});