Backbone JS 应用程序主逻辑放在哪里答案

【问题标题】：Backbone JS where to put Application main logicBackbone JS 应用程序主逻辑放在哪里
【发布时间】：2012-12-08 03:02:45
【问题描述】：

使用 Backbone，我开始构建一个应用程序，我将所有内容都完全分开。但现在我有以下问题。我应该把应用程序的主要逻辑放在哪里，在视图中还是在模型中。例如，我有一个视图和一个模型，它们绑定到一个按钮，当我单击该按钮时，我必须制作

$.ajax(params)

我是把它放在视图中还是视图调用一个方法：

this.model.doAction(params)

你认为哪种方法最好？

【问题讨论】：

我想这取决于$.ajax(params) 在做什么。
一个 ajax 请求然后我必须处理响应，它涉及视图和模型中的更改
可能应该在模型中，然后模型中的事件会触发视图的变化。

标签： model-view-controller web-applications backbone.js

【解决方案1】：

您可以在视图中定义events 属性，其格式为{"event selector": "callback"}，例如。 {"click .collapse": "collapse"} 其中 collapse 将是一个定义为视图属性的函数。然后在这个回调函数中编写你的ajax请求代码。

此外，除非我遗漏了什么，否则“将视图和模型绑定到按钮”对我来说听起来并不正确。相反，您应该考虑与视图的一个实例相关联的一个模型实例。每当模型实例的属性发生变化时，都会触发模型change 事件。您可以将视图函数绑定到此事件，以便模型中的更改反映在视图中。这是一个简单的例子

var Book = Backbone.Model.extend({
   // ...
});

var BookView = Backbone.View.extend({

    initialize: function () {
        this.model.bind('change', this.render, this);
    },

    render: function () {
        // here, make changes to the dom as per changes in model
    }
});

要将模型与视图实例相关联，您可以在实例化新的时传递它查看对象..

var book = new Book({
   title: "A great book"       
});

var view = new BookView({model: book});

view.model.set('author', 'AGreatAuthor');

set 函数调用将触发 change 事件并导致视图的渲染函数被称为。

有关完整示例，请参阅annotated source of Todos 应用示例。

【讨论】：