Question

我正在尝试自己学习backbone.js。我创建了一个简单的视图，并希望切换两个不同DIV元素的可见性。

我无法弄清楚如何使用Backbone正确渲染它。

希望有人可以帮助指出我的代码出了什么问题。感谢。

以下是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所需的插件，并希望使用主题创建“左侧带图标的按钮”，如何将其应用于上面的代码并使其适用于同样的事情？

赞赏是否有专家可以指导我。提前谢谢。

Answer 1

您需要在渲染功能中为视图创建HTML，而不是像现在一样将其放在HTML页面中。然后，您可以控制视图中相关切换功能中元素的隐藏和显示。

所以这是做什么的：

1）从HTML中删除以下内容

<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>

2）修改渲染功能如下：

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

3）将您的事件更改为使用类而不是ID：

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

4）更改左侧切换并切换右侧功能：

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

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

请注意，我将您的id属性更改为类属性，这通常更好，因为这意味着您可以在多个位置重用该视图。这不是问题，因为当您通过执行此操作选择它们时，它们将作用于视图：this.$(".leftpanel")。请注意，您还必须修改CSS以反映此更改。

此外，我将HTML放置在渲染函数中作为字符串呈现的方式并不是处理此问题的最佳方法。最好使用模板库。那里有植物，还有一个随Backbone一起提供的植物。使用模板库可以让您更好地重用HTML片段，而不会用丑陋的字符串污染您的视图。

如何正确渲染Backbone.js视图

所以这是工作版html代码和java脚本

1 个答案: