Question

我正在使用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);
}

等

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

所以问题是：

我应该如何抽象呢？我想从BaseView类扩展并在那里添加逻辑，但我不知道是否有更好的方法。
可以添加一个处理计算的自定义Model类吗？我一直在使用rails一段时间，我习惯于数据库中的模型===表。

非常感谢！

Answer 1

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

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

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

我的简单例子：

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将为模型“result”数据更改事件注册一个侦听器，并根据您指定的模型呈现初始布局。

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.Plus-一键式点击事件处理程序：

您可以观察View在更改模型时如何重新渲染它的布局。

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

希望这对你有所帮助。

在Backbone js中提取逻辑

1 个答案: