backbone sync post with flask

python:

 

# -*- coding:utf-8 -*-

from flask import Flask,render_template,url_for,session,flash,request,json,jsonify



#....app init



@app.route('/b2')

def b2():

    return render_template('b2.html')



@app.route('/usersave',methods=['GET','POST'])

def usersave():

    if request.method == 'POST':

        data = json.loads(request.data)

        print data['name']

        print data['age']

        return jsonify(success = True)

    return jsonify(success = False) 

b2.html

<div id="app">

    <div id="create-name">
        <input id='new-name'/> <button id="btn">click</button>
    </div>


</div>

 

js:

$(function(){
    
    //User模型
    var User = Backbone.Model.extend({
        defaults:{
            'name':'empty',
            'age':'25'
        }

    });


    var UserCollection = Backbone.Collection.extend({
        url:'/usersave',    //create方法会自动调用的 sync event
        model:User          //定义model
    });

    var Users = new UserCollection;        //建立model collection

    var AppView = Backbone.View.extend({
        el:$('#app'),
        events:{
            //定义button和input enter 事件
            "keypress #new-name":"createOnEnter",
            "click #btn":"createOnBtn"
        },
        initialize:function(){
            //初始先取得input 对象
            this.name_input = this.$('#new-name');
        },
        //input enter事件
        createOnEnter:function(e){
            if(e.keyCode != 13) return;
            console.log(e);
            console.log(e.target.value);
            console.log(this.name_input.val());
        },
        //点击button事件
        createOnBtn:function(e){
            console.log(e);
            console.log(this.name_input.val());
            user = new User;    //建立model
            //user.set({'name':this.name_input.val()});
            user.set({name:this.name_input.val(),age:10});    //set input value
            console.log(JSON.stringify(user));
            Users.create(user.toJSON());    //collection  sync post        
        },
    });

    var app = new AppView;

});