Backbone JS按钮打开一个新的视图,将值保存在表单中

jexiocij  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(114)

我新的 Backbone ,我期待着一个非常简单的2视图配置页usig Backbone 。
我有下面的代码;

define(
  ["backbone","...","..."],
    function(Backbone, ... , ... )  {
      var PopupView = Backbone.View.extend({
        initialize: function initialize() {
          Backbone.View.prototype.initialize.apply(this,arguments);
        },

        events: {
          "click .save_conf_button": "save_conf",
        },

        render: function() {
          this.el.innerHTML = this.get_popup_template();
          return this;
        },

        save:conf: function save_conf() {
          //get the field values from popup_template
          //var items = jquery(....);
      });

      var ExampleView = Backbone.View.extend({
        //Starting view
        initialize: function initialize() {
          Backbone.View.prototype.initialize.apply(this, arguments);
        },

        events: {
          "click .setup_button": "trigger_setup", //Triggers final setup
          "click .create_conf_button": "trigger_popup_setup", //This is the conf popup 
        },

        render: function() {
          this.el.innerHTML = this.get_start_html();
          return this;
        },

        trigger_popup_setup: function trigger_popup_setup() {
          console.log("Pop up");
          //this.el.innerHTML = this.get_popup_template();
          PopupView.render();
          ...
        },
      }); //End of exampleView
  return ExampleView;
 } // end of require asynch
); // end of require

例如,ExampleView是具有几个字段和2个按钮的起始视图;创建弹出窗口并保存。在按下create_conf_button后,我想渲染弹出窗口视图,但这似乎并不像我预期的那样工作。(Uncaught TypeError: PopupView.render is not a function
我不确定如何继续,另外,生成这些类型的对话框的“最佳实践”是什么?另外,从弹出视图返回后,保留上一页中填写的值将是优先选择的。
谢谢你的帮助

f87krz0w

f87krz0w1#

尝试

new PopupView.render()

必须创建一个示例才能以这种方式调用这些方法

yzxexxkh

yzxexxkh2#

@ashish是正确的,在调用PopupView的render方法之前,你必须示例化PopupView的一个示例。目前,你已经为一个名为PopupView的视图定义了一个蓝图,它将作为新创建的PopupView视图示例的构造函数。为了使用这个定义的视图,我建议将它存储在ExampleView的render或initialize方法中:

// Example View's initialize method
initialize: function initialize() {
   this.popUpView = new PopupView();
   Backbone.View.prototype.initialize.apply(this, arguments);

},
然后在trigger_popup_setup函数中引用它,如下所示:

trigger_popup_setup: function trigger_popup_setup() {
    console.log("Pop up");
    //this.el.innerHTML = this.get_popup_template();
    this.popUpView.render();
    ...
},

对于存储状态, Backbone 模型用于:)
通常,要在Backbone中在主视图中嵌套子视图,可以执行以下操作:

initialize : function () {
    //...
},

render : function () {

    this.$el.empty();

    this.innerView1 = new Subview({options});
    this.innerView2 = new Subview({options});

    this.$('.inner-view-container')
        .append(this.innerView1.el)
        .append(this.innerView2.el);
}

在本例中,主视图在其render方法中创建其子视图的示例,并将它们附加到相应的DOM元素。

相关问题