javascript - 使用 BackBone.js 的小型计算器-6ren

javascript - 使用 BackBone.js 的小型计算器

转载作者：行者123 更新时间：2023-12-02 18:21:15

我最近开始学习backbone.js。我发现这太棒了；我认为保持代码整洁和结构良好非常有用且优雅。

实现经典的todo应用程序后，我尝试设计一个简单的应用程序。我认为计算器可能是一个很好的例子。

最有问题的部分是 View 。我使用一个监听点击事件的 View 按钮，然后更新输出元素(计算器的屏幕)。该模型提供基本运算(例如加法和减法)并仅存储结果。

但是，当我开始实现时，问题就出现了。该 View 能够检测单击事件，但无法识别单击了哪个按钮。

首先，你认为我的设计正确吗？如何识别正确的按钮？ (代码在文章最后)

最好有两个 View ，一个控制按钮，一个控制每个按钮？例如，一个按钮可能会监听自身的单击事件，然后用其编号触发另一个事件，然后该事件被其他观点？

任何建议都非常感激。 :D

这是代码:

index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Backbone.js • Calculator</title>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>

<section id="calculatorApp">
    <header id="header">
        <h1>CalculatorJS</h1>
        <div id="output">Result</div>
    </header>
    <section id="buttons">
        <div class='button'>1</div>
        <div class='button'>2</div>
        <div class='button'>3</div>
        <div class='button'>4</div>
        <div class='button'>5</div>
        <div class='button'>6</div>
        <div class='button'>7</div>
        <div class='button'>8</div>
        <div class='button'>9</div>
    </section>
</section>

<script src="js/lib/jquery.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/lib/backbone.localStorage.js"></script>
<script src="js/views/calculator.js"></script>
<script src="js/model/calc.js"></script>
<script src="js/app.js"></script>

</body>
</html>

AppView.js

var app = app || {};

app.AppView = Backbone.View.extend({

    el: '#calculatorApp',
    events:{
        'click .button':'update_output'
    },
    initialize: function () {
        this.$output = this.$('#output');
        this.$buttons = this.$('#buttons');
        console.log("Initialize function AppView");

    },
    update_output:function(symbol){
        console.log("Update output : " +  symbol);
        console.log(symbol);
    },
    click:function () {
        console.log("click");
    }
    },
    // Class properties
    {
         NUMBERS:10
    }
);

======编辑=======

按照 Colin 的建议，使用 even.target 我可以检索已单击的按钮。

但是，我更关心应用程序的设计，所以我决定打破将 View 分解为两个解耦的 View 。 AppView是外部 View ，并且ButtonView 是与按钮关联的 View 。这种设计需要一种在按钮被按下时通知外部 View 的方法。点击。我认为最好的解决方案应该是使用专用事件“clickOn”。当用户单击按钮时，ButtonView 会触发 onClick 事件。AppView 监听此事件并更新输出收到时。为了达到这个结果，我必须在应用程序命名空间中引入一个额外的对象(vent)，以便AppView和ButtonView都可以使用相同的事件。

这是一个更好的设计吗？因为我可以交换观点而没有任何副作用？

这是我引入的更改:

var app = app || {};

app.ButtonView = Backbone.View.extend({

    tagName: 'div',
    className : 'button',

    events:{
        'click' : 'onClick'
    },

    template: _.template($('#button-template').html()),

    initialize:function() {
        console.log("Initialize button : " + this.model.symbol);
    },

    render: function () {
        console.log("Render function");
        this.$el.html(this.template( {"symbol" : this.model.symbol}));
        return this;
    },

    onClick: function () {
        console.log("Hi, I am " + this.model.symbol);
        app.vent.trigger("clickOn", this.model.symbol);
    }
});

事件:

app.vent = _.extend({}, Backbone.Events);

AppView.js:

app.AppView = Backbone.View.extend({

    el: '#calculatorApp',
    events:{
    },
    initialize: function () {
        this.$output = this.$('#output');
        this.$buttons = this.$('#buttons');
        console.log("Initialize function AppView");
        this.createNumericButtons();
       ttonView({model:new_model});
        this.$buttons.append(b this.listenTo(app.vent, 'clickOn', this.update_output)
    },

        createNumericButtons:function(){
            for (var i=0; i< app.AppView.NUMBERS; i++){
                var new_model = {symbol:i};
                var button = new app.Buutton.render().el);
        }
    },

    update_output:function(symbol){
        console.log("Update output : " + symbol);
        this.$output.html(symbol);
    },
    click:function () {
        console.log("click");
    }
    },
    // Class properties
    {
         NUMBERS:10
    }
);

最佳答案

您可以使用 event.target 访问单击的元素，像这样:

update_output:function(event){
    // event.target refers to the clicked element
    console.log(event.target);
}

通过 JSFiddle 的简化演示:http://jsfiddle.net/C7PZZ/1/

关于您的整体设计，您的应用程序可能足够简单，单个 View 就可以了。不过，我建议创建一个单独的 ButtonView。将 UI 分解为更小的部分(即 View )有助于在应用程序复杂性增加时保持事物的可管理性。如果您对构建 Backbone 应用程序感兴趣，我认为这将是一个很好的练习。

关于javascript - 使用 BackBone.js 的小型计算器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18803138/

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 BackBone.js 的小型计算器