5

我正在开发一个Backbone应用程序Marionette，我需要一些帮助来组织代码中的逻辑。

目前我有一些处理非常相似的逻辑的视图，我想抽象一下以避免重复：

视图1

onRender: function() {
    var pluginData = this.$("selector1").plugin();
    var pluginResult = this.handlePluginData(pluginData);
    this.doSomethingWithResult1(pluginResult);
}

视图2

onRender: function() {
    var pluginData = this.$("selector2").plugin();
    var pluginResult = this.handlePluginData(pluginData);
    this.doSomethingWithResult2(pluginResult);
}

ETC

注意：handlePluginData做同样的事情，doSomethingWithResultN它是不同的，但可以用一些参数抽象出来。

所以问题是：

  • 我应该如何抽象这个？，我想过从一个BaseView类扩展并在那里添加逻辑，但我不知道是否有更好的方法。

  • 可以添加一个Model处理计算的自定义类吗？我已经使用rails了一段时间，并且习惯于在数据库中建模 === 表。

非常感谢你！

4

1 回答 1

1

我认为 Backbone View 类足够抽象。您所要做的就是在创建新的 View 实例时传递不同的选项。

我发现你把计算逻辑放在 View 的 render 方法中。因为 Backbone 是一个基于 MVC 的框架，所以逻辑应该放在 Model 和 View 注册事件处理程序中，该事件处理程序负责在 Model 触发感兴趣的视图事件时渲染布局。

在我看来，您可以添加一个模型来处理计算和重新定义您的视图。

我的简单例子：

1.定义一个响应逻辑计算的模型：

var MathModel = Backbone.Model.extend({
    result: 0,
    initialize: function(){
        console.log("calculate target: "+this.get("selector"));
        console.log("calculate method: "+this.get("method"));
        var number = this.handlePluginData();
        this.doSomethingWithResult(number);
    },
    handlePluginData: function(){
        return $(this.get("selector")).text();
    },
    doSomethingWithResult: function(number){
        if(this.get("method")==="square"){
            this.set({result:(number*number)});
        }else{
            this.set({result:(number*number*number)});
        }

    }
});

2.重新定义View类：

View 将为模型“结果”数据更改事件注册一个侦听器，并根据您分配的模型呈现初始布局。

var AbstractView = Backbone.View.extend({
        initialize: function(){
            this.listenTo(this.model,"change",this.onModelChange);
            this.number = this.model.get("result");
            this.render();
        },
        render: function(){
            this.$el.html(this.number); 
        },
        onModelChange: function(model){
            this.number = model.get("result");
            this.render();
        },
        plusOne:function(){
            this.model.doSomethingWithResult(this.model.handlePluginData());
        }
    });

3.当您实例化一个新视图时，将不同的选项传递给模型。

var view1 = new AbstractView({el:"#result1",model:new MathModel({selector:".square",method:"square"})});
var view2 = new AbstractView({el:"#result2",model:new MathModel({selector:".cubic",method:"cubic"})});

4.HTML：

<div id="select-target">
    <span class="square">2</span>
    <span class="cubic">2</span>
    <button id="plus-one">+1</button>
</div>
<div id="result">
    <span id="result1"></span>
    <span id="result2"></span>
</div>

5.加一键点击事件处理：

您可以观察 View 在模型更改时如何重新呈现其布局。

$("#plus-one").click(function(){
        $(".square").text(Number($(".square").text())+1);
        $(".cubic").text(Number($(".cubic").text())+1);
        view1.plusOne();
        view2.plusOne();
    });

希望这对你有帮助。

于 2013-07-18T06:20:33.897 回答