使用Backbone.js切换div部分

时间:2016-10-21 09:25:38

标签: javascript backbone.js

我正在尝试构建一个可以显示某些内容的切换div。我的代码如下:

家长视图

/*global define:true */
define([
    "jquery",
    "backbone",
    "bootstrap",
    "BaseView",
    "view/money/inc/toggleHoldSection"
],
    function ($, Backbone, Bootstrap, BaseView, ToggleHoldSection) {

        "use strict";
        var moneyView = BaseView.extend({
            el: "#moneyPage",
            template: "/public/templates/index.dust"

            events: {
                'click #click-to-toggle': 'toggleHoldSection'
            },

            initialize: function () {
                this.showmeState = true;
            },



            toggleHoldSection: function (evt) {
                evt.preventDefault();

                console.log('this.showmeState', this.showmeState);
                var view = new ToggleHoldSection();
                if (view && this.showmeState === false) {
                    console.log("in if condition");
                    this.$el.find('toggle-div-content').show();
                    this.showmeState = true;
                    view.render();
                }
                else{
                    console.log("in else part", this.showmeState);
                    if (view && this.showmeState === true) {
                        console.log("in else if");
                        this.$el.find('toggle-div-content').hide();
                        this.showmeState = false;
                        view.render();
                    }
                }
            }


        });

        return moneyView;
    });

子视图

define([
    'jquery',
    'backbone',
    'BaseView',
    ], 
    function ($, BackBone, BaseView){
        'use strict';

        return BaseView.extend({
            el:'#click-to-toggle',

            template:'money/inc/messages',

            initialize: function () {

            },

            beforeRender: function () {

            },

        })

})

粉尘页

<div id="click-to-toggle" class="modal-inner-box mobile-specific-holdsection" >
    <span class="icon icon-arrow-up-small modal-caret-up"></span>
    <div class="toggle-div-content">
        <p>hidden section mobile specific</p>
    </div>
</div>

上面的问题是我没有看到div的适当行为;它不会切换,而是显示一次然后没有任何反应。

有人可以帮我吗?

1 个答案:

答案 0 :(得分:3)

this.$el.find('toggle-div-content')...

应该是

this.$el.find('.toggle-div-content')...