分享一个使用Backbone和Seajs构建的TODO小站（Nodejs环境适用）

前段时间用Backbone和Seajs做了一个类似TODO的小站，目前用作记录自己的学习笔记。还有许多不完善的地方，一直以来，自己做的这种东西都不太好意思拿出手。刚才看到一个网友分享的一个用Backbone和requireJs做的论坛： http://cnodejs.org/topic/522dbf0e101e5745216f5b82 感觉不管好坏，分享一下总是好的，或许还能共共同交流学习！网址：http://www.timefly.cn 代码：http://www.github.com/sarike/timefly

nodeper 1楼

分享一个使用Backbone和Sea.js构建的TODO小站（Node.js环境适用）

前段时间我用Backbone和Sea.js做了一个简单的TODO应用，目前主要用于记录我的学习笔记。尽管还有很多不完善的地方，但我还是想拿出来分享一下，希望可以与大家共同交流学习！

最近看到了一位网友分享的一个用Backbone和RequireJS构建的论坛： http://cnodejs.org/topic/522dbf0e101e5745216f5b82

这给了我很大的启发，于是我也尝试着使用Backbone和Sea.js来构建一个简单的TODO应用。

网址

你可以访问我的TODO小站： http://www.timefly.cn

代码

项目的源码托管在GitHub上： https://github.com/sarike/timefly

技术栈

Backbone.js：用于构建前端的MVC架构。
Sea.js：用于模块化管理和加载。
Node.js：后端服务器搭建。

示例代码

以下是一个简单的示例，展示了如何使用Backbone和Sea.js来构建一个TODO列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TODO App</title>
    <!-- 引入Sea.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/seajs/3.0.0/sea.js"></script>
</head>
<body>

<div id="todo-app">
    <input type="text" id="new-todo" placeholder="What needs to be done?">
    <ul id="todo-list"></ul>
</div>

<script>
    seajs.use('./app/main'); // 引入主模块
</script>

</body>
</html>

// app/main.js
define(function(require, exports, module) {
    var $ = require('jquery');
    var Backbone = require('backbone');

    $(function() {
        var Todo = Backbone.Model.extend({
            defaults: {
                title: '',
                completed: false
            }
        });

        var TodoList = Backbone.Collection.extend({
            model: Todo
        });

        var TodoView = Backbone.View.extend({
            tagName: 'li',
            template: _.template('<%= title %>'),
            events: {
                'click .toggle': 'toggleCompleted'
            },
            initialize: function() {
                this.listenTo(this.model, 'change', this.render);
            },
            render: function() {
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            },
            toggleCompleted: function() {
                this.model.set('completed', !this.model.get('completed'));
            }
        });

        var AppView = Backbone.View.extend({
            el: '#todo-app',
            events: {
                'keypress #new-todo': 'createOnEnter'
            },
            initialize: function() {
                this.collection = new TodoList();
                this.collection.on('add', this.addOne, this);
                this.render();
            },
            render: function() {
                var that = this;
                this.collection.each(function(item) {
                    that.addOne(item);
                });
            },
            createOnEnter: function(e) {
                if (e.which !== 13) return;
                var title = $('#new-todo').val();
                if (!title.trim()) return;
                this.collection.create({ title: title });
                $('#new-todo').val('');
            },
            addOne: function(todo) {
                var view = new TodoView({ model: todo });
                this.$('#todo-list').append(view.render().el);
            }
        });

        new AppView();
    });
});

以上代码展示了一个基本的TODO应用，包括模型、集合和视图的定义。通过Sea.js进行模块化管理，并使用Backbone来实现前端逻辑。

希望这个示例能帮助你更好地理解和使用Backbone和Sea.js来构建你的项目。如果你有任何问题或建议，请随时联系我！

nodeper 2楼

亲后台用的神马数据库捏？

gougou168 3楼

数据库是：Mysql 后端用的是：Python、Flask

wuwangju 4楼

挺赞的哦

eggper 5楼

嗨嗨，谢谢鼓励，好久之前就做了，一直没好意思拿出手

zlyuanteng 6楼

分享一个使用Backbone和Seajs构建的TODO小站（Nodejs环境适用）

前段时间我用Backbone和Seajs做了一个简单的TODO小站，用于记录我的学习笔记。尽管它还有很多需要改进的地方，但我认为分享出来还是有价值的，希望可以与大家共同交流学习。

技术栈

Backbone.js: 用于构建前端应用的MV*框架。
Seajs: 用于模块化加载和管理前端资源。
Node.js: 后端服务框架。

示例代码

这里提供一个基本的TODO列表的示例代码：

目录结构

/todo-app/
├── server/
│   └── app.js
├── public/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   ├── main.js
│   │   ├── models/
│   │   │   └── todo.js
│   │   ├── views/
│   │   │   └── todo-view.js
│   │   ├── collections/
│   │   │   └── todos.js
│   │   └── routers/
│   │       └── app-router.js
│   └── index.html
└── package.json

server/app.js

const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, '../public')));

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, '../public/index.html'));
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

public/js/models/todo.js

define(function() {
    var Todo = Backbone.Model.extend({
        defaults: {
            title: '',
            completed: false
        }
    });
    
    return Todo;
});

public/js/views/todo-view.js

define(['jquery', 'underscore', 'backbone', 'models/todo'], function($, _, Backbone, Todo) {
    var TodoView = Backbone.View.extend({
        tagName: 'li',
        
        events: {
            'click .toggle': 'toggleTodo'
        },
        
        toggleTodo: function() {
            this.model.set('completed', !this.model.get('completed'));
        },
        
        render: function() {
            this.$el.html(`<input type="checkbox" class="toggle"> ${this.model.get('title')}`);
            return this;
        }
    });
    
    return TodoView;
});

public/js/collections/todos.js

define(['underscore', 'backbone', 'models/todo'], function(_, Backbone, Todo) {
    var Todos = Backbone.Collection.extend({
        model: Todo
    });
    
    return Todos;
});

public/js/routers/app-router.js

define(['jquery', 'underscore', 'backbone', 'collections/todos', 'views/todo-view'], function($, _, Backbone, Todos, TodoView) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            '': 'index'
        },
        
        initialize: function() {
            this.todos = new Todos();
        },
        
        index: function() {
            this.todos.fetch().then(() => {
                // 渲染逻辑
            });
        }
    });
    
    var initializeApp = function() {
        var router = new AppRouter();
        Backbone.history.start();
    };
    
    return initializeApp;
});

public/js/main.js

require(['jquery', 'underscore', 'backbone', 'routers/app-router'], function($, _, Backbone, initializeApp) {
    initializeApp();
});

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TODO App</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div id="todo-app"></div>
    <script src="/js/main.js"></script>
</body>
</html>

结语

这是一个非常基础的TODO小站示例，其中使用了Backbone.js作为MV*框架，Seajs进行模块化管理，以及Node.js作为后端服务。你可以在此基础上进一步扩展和完善功能。希望对大家有所帮助！