Backbone.js:记录视图实例只返回el属性

我有一个按钮和一个表单。最初，当AddMenuForm视图初始化时，表单被隐藏。

我为AddMenuButton注册了一个事件，这样当点击按钮时，它就会取消隐藏表单

然而，代码addMenuForm$el.show（）不起作用。当我尝试控制台记录addMenuForm时，我得到的是addMenuForms的el属性，而不是addMenuForm实例。

new App;
var App = Backbone.View.extend({
    initialize: function() {
         var addMenuButton = new AddMenuButton;
         var addMenuForm = new AddMenuForm;
    }
});
var AddMenuButton = Backbone.View.extend({
    el: '#addMenuButton',
    events: {
        'click': 'click'
    },
    click: function(e) {
        e.preventDefault();
        console.log(addMenuForm);
        addMenuForm.$el.show();
    }
});
var AddMenuForm = Backbone.View.extend({
    el: '#addMenuForm',
    initialize: function() {
        this.$el.hide(); // hide the form
    }
})

我做了这样的事情，它正常工作

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Backbone.js</title>
  <script src="jquery-1.8.1.min.js"></script>
   <script src="underscore.js"></script>
  <script src="backbone.js"></script>
</head>
<body>
<div class="demo">
<form method ="get" id="addMenuForm" >
<input type="text" value="test"/>
<input type="button" name="button" value="Check it out!"  />
</form>
<input type="button" name="button" value="show form" id="addMenuButton" />
</div>
<script>
var App = Backbone.View.extend({
    el : "demo",
    initialize: function() {
        addMenuForm = new AddMenuForm();
        addMenuButton = new AddMenuButton({addMenuForm: addMenuForm});
    }
});
var AddMenuButton = Backbone.View.extend({
    el : '#addMenuButton',
    initialize: function(options) {
        this.addMenuForm = options.addMenuForm;
    },
    events: {
        'click': 'click'
    },
    click: function(e) {
        e.preventDefault();
        console.log(addMenuForm);
        addMenuForm.$el.show();
    }
});
var AddMenuForm = Backbone.View.extend({ 
    el : '#addMenuForm',
    initialize: function() {
        this.$el.hide(); // hide the form
    }
});
var  myApp = new App();
</script>

</body>
</html>

这里的问题是范围。AddMenuButton类不知道addMenuForm实例，因为该实例是在App的initialize方法中创建的。

例如，您可以取出addMenuForm的实例化，并在AddMenuButton的initialize方法中执行此操作。

var AddMenuButton = Backbone.View.extend({
    el: '#addMenuButton',
    initialize: function () {
       this.addMenuForm = new AddMenuForm
    },
    events: {
        'click': 'click'
    },
    click: function(e) {
        e.preventDefault();
        console.log(this.addMenuForm);
        this.addMenuForm.$el.show();
    }
});

我没有试过，但应该是那样的。

相关内容

最新更新

热门标签：