9

自分でbackbone.jsを学ぼうとしています。単純なビューを作成しましたが、2 つの異なる DIV 要素の表示を切り替えたいと考えています。

バックボーンを使用して正しくレンダリングする方法がわかりません。

うまくいけば、誰かが私のコードの何が問題だったのかを指摘するのを手伝ってくれるでしょう。ありがとう。

HTMLコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<title>Backbone view test</title>
<style type="text/css">
#leftpanel {float:left; height:300px; width:300px; border:1px solid; border-    radius:5px;}
#rightpanel {position:relative; left:20px; float:left; height: 300px; width:300px; border:1px solid; border-radius:5px;}
#controlpanel {position:absolute; top:400px;}
</style>
<body>
<div id="container"></div>
<div id="leftpanel">this is left panel</div>
<div id="rightpanel">this is right panel</div>
<div id="controlpanel">
<button id='LeftButton' style="float: left; width: auto;">Hide Left Panel</button>
<button id='RightButton' style="float: left; width: auto;">Hide Right Panel</button>
</div>
<script src="json2.js"></script>
<script src="jquery-1.10.1.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script src="backbone.localStorage.js"></script>
<script src="1.js"></script>
</body>
</html>

ここにjsコードがあります

$(function(){
var token = '';

var appview = Backbone.View.extend({
    el: $("#container"),

    initialize: function(){
        this.lp = this.$("#leftpanel");
        this.rp = this.$("#rightpanel");
        _.bindAll(this, 'render', 'toggleLeft', 'toggleRight');
        this.render();
    },

    events: {
        "click #LeftButton" : "toggleLeft",
        "click #RightButton" : "toggleRight"
    },

    toggleLeft: function(){
        token = "left";
        this.render(token);
    },

    toggleRight: function(){
        token = "right";
        this.render(token);
    },

    render: function(e) {
        if (e === "left") {
            this.lp.hide();
            this.rp.show();
        } else {
            this.rp.hide();
            this.lp.show();
        }
    }
});

var app = new appview();
});


これは、動作中のバージョンの HTML コードと Java スクリプトです。

HTML

<!DOCTYPE html>
<html>
<head>
<title>Backbone view test</title>
<link href="el.css" rel="stylesheet"></link>
<body>
<div id="container"></div>
<script src="json2.js"></script>
<script src="jquery-1.10.1.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script src="backbone.localStorage.js"></script>
<script src="1.js"></script>
</body>
</html>

JavaScript

$(function(){
var appview = Backbone.View.extend({
    el: "#container",

    initialize: function(){
        var lp = this.$(".rightpanel");
        _.bindAll(this, 'render', 'toggleLeft', 'toggleRight');
        this.render();
    },

    events: {
        "click .LeftButton" : "toggleLeft",
        "click .RightButton" : "toggleRight"
    },

    toggleLeft: function(){
        this.$(".leftpanel").hide();
        this.$(".rightpanel").show();

    },

    toggleRight: function(){
        this.$(".rightpanel").hide();
        this.$(".leftpanel").show();
    },

    render: function(e) {
        var viewHtml = '<div class="leftpanel">this is left panel</div>'
        viewHtml += '<div class="rightpanel">this is right panel</div>'
        viewHtml += '<div class="controlpanel">'
        viewHtml += '<button class="LeftButton" style="float: left; width: auto;">Hide Left Panel</button>'
        viewHtml += '<button class="RightButton" style="float: left; width: auto;">Hide Right Panel</button>'
            viewHtml += '</div>'
            this.$el.empty().append(viewHtml);
        }
    });

    var app = new appview();
});

ここで、jquery UI に必要なプラグインが既にあり、テーマを使用して「左側にアイコンがあるボタン」を作成したいとします。上記のコードに適用して同じことを機能させるにはどうすればよいですか?

専門家がこれについて私を導くことができれば感謝します。前もって感謝します。

4

1 に答える 1