將模型實例傳遞到已初始化的骨干視圖

Question

我想在這里將視圖的Model傳遞給已經初始化的View這是具有數據的視圖，可以將其視為Collection的ItemView ：

var app=app||{};
app.ContactView=Backbone.View.extend({
  tagName:'li',
  className:['contact-view'],
  model:app.Contact,
  events:{
    'click .editing-icon':'showEditView'
  },
  initialize:function contactViewInit(){
    this.render();
    this.listenTo(this.model,'change',this.render);
  },
  template:Handlebars.templates.contactView,
  render:function contactViewRender(){
    var html=this.template(this.model.toJSON());
    this.$el.html(html);
    return this;
  },
  showEditView:function(){
    //show edit view...this should also be handled by app view...
    //(1)how do I pass a message to editview;how can I generate an event in Backbone
    app.EditView.set({
     //there is an error here...
      model:this.model
    });
  }
});

這是應該接收數據的View ，它是基於靜態html的，它會打開一個模態並提示用戶編輯模型數據，該數據將重新呈現第一個視圖，該視圖已被初始化，因為我認為沒有意義在反復初始化中：

  var app=app||{};

var EditView=Backbone.View.extend({
  el:'#edit-modal',
  initialize:function initializeEditView(){
    console.log("Initializing Modal for editing");
    console.log(this.model.toJSON());
    this.$form=this.$el.find("form");
    this.initializeEditForm();
    this.showYourself();
  },
  initializeEditForm:function initializeEditForm(){
    this.$form.find('#edit-name').val(this.model.get('name'));
    this.$form.find('#edit-email').val(this.model.get('email'));
    this.$form.find('#edit-phone').val(this.model.get('phone'));
  },
  showYourself:function showYourself(){
    this.$el.modal('show');
  },
  hideYourself:function hideYourself(){
    clearEditForm();
    this.$el.modal('hide');
  },
  clearEditForm:function clearEditForm(){
    this.$form.find('#edit-name').val('');
    this.$form.find('#edit-email').val('');
    this.$form.find('#edit-phone').val('');
  },
  events:{
    'click #edit-contact button':'submitEditedData'
  },
  submitEditedData:function submitEditedData(){
      var data={
          name:this.$form.find('#edit-name').val(),
          phone:this.$form.find('#edit-phone').val(),
          email:this.$form.find('#edit-email').val()
      };
      console.log("Data recieved from the edit form");
      this.model.set(data);
      this.hideYourself();
  }
});

app.EditView=new EditView();

我有一個AppView可以用html表單創建數據，我應該在那兒處理嗎？

更新：

這是我構建的AppView ，用於處理創建model並將其添加到集合中（這將導致集合視圖呈現此項目視圖並將其添加到集合中）：

 var app=app||{};
app.AppView=Backbone.View.extend({
  el:'#app',
  initialize:function appInit(){
    //mostly caching selectors here
    this.$form=this.$('#new-contact');
    this.$contactList=this.$('#contacts-list');
  },
  events:{
    'click #new-contact button':'createContact'
  },
  createContact:function createContact(e){
    e.preventDefault();

    //build a model based on form and clear the form
    var contact=this.createModelUsingForm();
    this.clearForm();
    //add model to the collection
    app.ContactsCollection.add(contact);
  },
  createModelUsingForm:function createModelUsingForm()
  {
    var data=this.processFormForContact();
    var contact=new app.Contact(data);
    return contact;
  },
  processFormForContact:function processFormForContact()
  {
    return {
      name:this.$form.find('#name').val(),
      phone:this.$form.find('#phone').val(),
      email:this.$form.find('#email').val()
    };
  },
  clearForm:function clearForm(){
    this.$form.find('#name').val('');
    this.$form.find('#email').val('');
    this.$form.find('#phone').val('');
  }
});

Answer 1

考慮從ContactView觸發事件，該事件將模型傳遞回中央控制器。 然后，控制器可以偵聽此事件並做出相應的反應，即使用從事件中接收到的模型實例化EditView。