如何正确渲染Backbone.js视图

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 个解决方案

解决方案1
11 已采纳 2013-07-03 03:33:05

如何正确渲染Backbone.js视图

问题描述

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

1 个解决方案

解决方案1 11 已采纳 2013-07-03 03:33:05

解决方案1
11 已采纳 2013-07-03 03:33:05