backbone-require-text

目录结构

require配置即程序入口：main.js

require.config({
    //baseUrl: 'http://localhost/backbone/js',
    paths: {
        "jquery": "jquery-1.10.2.min",
        "underscore": "underscore",
        "router": "router",
        "backbone": 'backbone',
        "text": "text",
        "views": "views",
        "models": "models",
        "collections": "collections",
        "templates": "../templates"
    },
    
    shim: {
        'underscore':{exports:'_' },  
        'backbone': {deps:['underscore'], exports: 'Backbone' },
        'templates': {deps: ['text'], exports: "templates"}
    }
    
});
require(['router', 'backbone'], function(Router, Backbone) {
    var router = new Router();
    Backbone.history.start();//开始监听router
});

引入入口

<script src="js/require.js" data-main="js/main" type="text/javascript"></script>    //main.js为主程序入口

router

define(['backbone'], function(Backbone) {
    var Router = Backbone.Router.extend({
        routes: {
            "": "home",
            "search": "search",   // #search
            "test/:q": "test"     // #help/1
        },
        home: function() {
            require(['views/test'], function(TestView) {
                new TestView();  
            })
        },
        search: function() {
            console.log(2);
        },
        test: function(q) {
            console.log("test");
        }
    });
    return Router;
});

view

define(['backbone', 'models/test', 'collections/test', 'text!templates/test.html'], 
function(Backbone, TestModel, TestCollection, TestTmpl) {
    var TestView = Backbone.View.extend({
        el: "#container",
        tagName: 'div',
        className:'test',
        //model: TestModel, //当有collection时不需要model
        template: _.template(TestTmpl),
        events: {
            
        },
        initialize: function() {
            var collection = new TestCollection();

            var _this = this;
            
            //get collection data
            collection.fetch({
                success: function(collection1, response) {
                    // console.log(collection1, response);
                    var names = collection.pluck("name");
                    console.log('pluck: ' + names); //1
                    //console.log('get', collection.get('name')); //undefined
                    
                    _this.render(collection);
                    
                    // collection delete
                    _.invoke(collection.test(), 'destroy', {
                        success: function() {
                            //success handle
                        },
                        error: function() {
                            console.log('delete from collection error');
                        }
                    }); 

                },
                error: function() {
                    console.log(2);
                }
            });
            
            //1.create a model 
            //2.add the model to collection

            // collection.create([
            //     {"name": "test1"},
            //     {"name": "test2"},
            //     {"name": "test3"}
            // ], {
            //     success: function() {
            //         console.log('collection create success');
            //         console.log("collection after create: ", collection);
            //     }
            // });

            //get model data

            // this.model.fetch({
            //     success: function(model, data) {
            //         console.log(model, data);
            //     },
            //     error: function() {
            //         console.log('error');
            //     }
            // });

            //update || add

            // this.model.set({"a": 2222});
            // this.model.save();

            //delete urlRoot时有参数

            // this.model.destroy({
            //     success: function(model, response) {
            //         console.log(model, response);
            //         console.log('delete success');
            //     },
            //     error: function() {
            //         console.log('delete error');
            //     }
            // });

            
        },
        render: function(collection) {
            this.$el.html(this.template(collection.models[0]));
            return this;
        }
    });
    return TestView;
});

collection

define(['underscore', 'backbone', 'models/test'], function(_, Backbone, TestModel) {
    var TestCollection = Backbone.Collection.extend({
        url: 'testdata/test.json',
        model: TestModel,
        test: function() {
            return _.where(this.models, {id: '111111'});
        }
    });
    return TestCollection;
});

model

define(['backbone'], function(Backbone) {
    var TestModel = Backbone.Model.extend({
        defaults: {
            id: '111111',
            name: 'test name'
        },
        //url: 'testdata/test.json', 
        urlRoot: "",//当有collection时，只要定义一个空的urlRoot
        
    });
    return TestModel;
});

template

mark