1

ボタンとフォームがあります。最初に、AddMenuForm ビューが初期化されると、フォームは非表示になります。

AddMenuButton のイベントを登録して、ボタンをクリックするとフォームが再表示されるようにします。

ただし、コード addMenuForm.$el.show() は機能しません。addMenuForm をコンソール ログに記録しようとすると、addMenuForm インスタンスではなく、addMenuForm の el 属性が取得されます。

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
    }
})
4

2 に答える 2

0

私はこのようなことをしましたが、正常に動作します

<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>
于 2013-06-24T11:05:03.353 に答える