html、javascript、backbone 学习…

2013.1.8 start

1. 登陆框按钮按下后无法显示登陆框

 

用script 将代码括起后，绑定事件，显示登陆框

events: {

  "click #loginBtn": "sendmsg", //事件绑定，绑定Dom中id为check的元素   按下登录按钮，触发事件，触发方法sendmsg   

},

 

 

 

 

2. 注册按钮和注册框不在原来的位置，

解决方法：在用script 括起这部分布局的时候将整个框体部分的代码全部包含，这样实例化的时候将不会部分实例化，造成布局分离

 

 

3. 怎么取得输入的账号和密码

 

在触发的方法中：使用：

  var account1 =$("#account")[0].value;    //account是ID

password1=$("#password")[0].value;

 

4. 怎么发送得到的账号和密码

 

使用POST：

 

   $.post("/login", {"account":account1,"password":password1},function(data) {

console.log("success to submit");

/login 是网址url   ，   

使用json格式发送数据：{“key”：“value”}， 

后面跟随的是服务器返回的方法和data数据。

 

 

5. 服务器端 怎么接收数据

 

 

//接收登录消息：==========================================

app.post('/login',function(req,res){

var request1=req;  //用变量接收数据

console.log("login:"+request1.body.account+"   "+request1.body.password);  

//使用上面方法接收数据，服务器方和客户方的名称key必须一致

res.send({"server":"login"}) //返回的数据

});

 

 

6. 点我要登录按钮 服务器得到的是 undefined 数据

 

 

解决：在button和框定义的时候使用ID作为标示符，否则使用name做为标示符的话，无法识别

 

      

      $("#loginBtn")   -----使用ID识别

  

  $(".btn")      ---------使用 class识别

 

 

7. 点击 我要注册 按钮，服务器接收到了第一次的数据，但是服务器却接收到了两次的数据，第一次显示正常，第二次为undefined：

以后点击按钮都为undefined，什么原因？

 

原因是在使用<form>中使用了action="/register" method="post" 属性，而下面的：

 $.post("/register", {"accountnum":account2,"password1":passwordA,"password2":passwordB},function(data) {

console.log("success to submit");

});

 

其中也使用/register  使得两次访问，重复刷新了一次，但这个解决了后，为什么无法得到ajax的局部访问效果，因为这样就刷新了整个界面，不是局部刷新。

 

8. 原以为 查得的  “html onchange 事件”在

中使用onchange事件才能触发改变事件，但得到的结果却并不是如此的，因为使用了backbone，所以省略了编写onchange函数这么一个步骤，使得编写事件变得容易，直接使用ID调用绑定这个部件的ID就好，这样就可以触发事件：

events: {

  "click #searchtext": "sendmsg3",

}

 

 

9. 图片拉取load 的问题：

1）html和js 代码粘上去后，其实就一个加载方法，一个html控件，还有一个drop绑定事件，出现问题，绑定的事件ID是img的ID，出现错误，无法加载图片，拖拽图片上去后出现的是使用网页打开图片，而不是使用控件打开图片

解决方法： 因为是使用img的ID，当前HTML中：

        <div class="span4 pictureContainer">

                    <div class="well" style="width: 180px;text-align: center;width:50%;margin: 0px auto;">

                        <p><img id="picture" width="180" /></p>

                        <p style="color:#999;">To change the picture, drag a new picture from your file system onto the box above.</p>

                    </div>

                </div>

可以看到img模块 中没有内容，也就是不存在，无法得到DROP的数据，所以就使用上面的 class="span4 pictureContainer"，来解决触发的名称 。 

当使用class的时候，并不是和使用ID的时候一样，

使用class的时候是：

"drop .pictureContainer": "dropHandler"

使用ID的时候是：

"drop #pictureContainer": "dropHandler"

效果：

 

2）出现另一个问题，最基本的问题之一，忘了在两个函数方法间加上逗号，为什么不是加上分号呢？因为两个方法直接是以值的方式存在，相当于多个方法组成一条语句，

int a，b 这样，所以使用逗号，但是方法内部使用分号，是因为方法内部是不同的语句。

    

 

 

8.在backbone中调用其中的方法，使用this。~~  因为这是。。。规定。。。。但是方法要是不在backbone中，就可以直接调用。

 

 

 

9.怎么使用按下按钮，弹出另一个网页   

 

待学习。。。

 

 

10.  model对象实例化

 

Mvc：model view collection control

 

Backbone.Model.extend 定义的对象，实例化的访问和赋值：

 

World = Backbone.Model.extend({

//创建一个World的对象，拥有name属性

name: null,

id:null <!--此处添加ID作为标示

,initialize:function(para){

   this.set({name:"wang"});

   this.set({id:"king"});

console.log("44");    

}

});

 

实例化：

var world1= new World; 

console.log(world1);   输出对象。

console.log(world1.get('name'));   输出name属性。

 

 

 

 

http://www.ibm.com/developerworks/cn/web/wa-backbonejs/ 学习Backbone models和collection

 

Backbone：

· 强制依赖于 Underscore.js，Underscore.js 是一个实用型库

· 非强制依赖于 jQuery/Zepto

· 根据模型的变更自动更新应用程序的 HTML，有助于代码维护

· 促进客户端模板使用，避免了在 JavaScript 中嵌入 HTML 代码

· 

模型、视图、集合和路由器是 Backbone 框架中的主要组件。在 Backbone 中，模型会存储通过 RESTful JSON 接口从服务器检索到的数据。模型与视图密切关联，负责为特定 UI 组件渲染 HTML 并处理元素上触发的事件，这也是视图本身的一部分。

 

 

 

NodeJS的异步编程风格

http://www.infoq.com/cn/news/2011/09/nodejs-async-code 

 

 

 

11. 

 

12.  

 

13.