学习jquery mvc第一天，hello

学习jquery mvc第一天，hello

做为程序员，对于hello那是太熟悉不过了。在这里，也是从hello开始学习jquery mvc框架。

在这里我们除了使用jquery mvc3.2.2之外，UI使用了Wijmo2.0.5。所以，首先我们得下载jquery mvc和wijmo开发包。

首先，我们使用myeclipse创建一个名为promanage的Web Project，然后把mvc和wijmo解压外的所有文件都放在Web Project下载。

目录如下看附件。



接着，使用cmd命令进入工程下面的pages目录下面，使用js生成我们需要的程序。在这里我们生成project，当然也可以修改成其它，命令如下：

 

js jquery/generate/app project


最终生成的的工程目录看附件。


在附件中我们可以看到models，这个文件夹就是放模型文件的，我们还需要控制器文件夹controller和视图文件夹views，在这２个文件夹中
我们放置后续我们需要添加的控制器文件和视图文件，在这里我们使用ejs模板视图。


第一步，我们创建模型，在这里我们只是实现一个功能，create功能。代码如下：

steal('jquery/model', function(){

/**
 * @class Project.Models.Task
 * @parent index
 * @inherits jQuery.Model
 * Wraps backend task services.  
 */
$.Model('Project.Models.Project',
/* @Static */
{
	findAll: "/tasks.json",
  	findOne : "/tasks/{id}.json", 
  	create:"/project.json",
  	create : function(attrs,success,error){
  		//需要实现servlet
  		return $.post("/projectlist",attrs,success);
  	},
 	update : "/tasks/{id}.json",
  	destroy : "/tasks/{id}.json"
},
/* @Prototype */
{});

})

 第二步，我们创建控制器，代码如下：

steal( 'jquery/controller','jquery/controller/view','jquery/view/ejs','jquery/model'
)
.then(function($) {
	//控制器
    $.Controller('project.proc',
    /** @Static */
    {
        defaults : {
            nav1 : '',
            //创建一个模型对象
            model:new Project.Models.Project()
        }
    },
    /** @Prototype */
    {
    	//模型执行保存动作后的事件
    	"{model} created":function(result){
    		alert(result);
    	},
    	//按钮的动作
       'button click':function(el,ev){
       		//传递多个参数，也可以只传递一个参数
       		this.options.model.attrs({name:'test'});
       		//只传递一个参数，如下：
       		//this.options.model.attr("name","test");
       		this.options.model.save();
       },
       init:function(){
       		//注意影响的数据格式一定要正确，否则model created事件不会触发
       		$.ajaxSetup({
			  dataType:"text",
			  contentType :'application/json'
			});
			//加载视图
       		this.element.html($.View("//project/views/project/init"));
       		//wijmo按钮
       		$("button").button();
       }
    }
)});

 第三步，我们创建视力，代码如下：

<div>
<button id="test">点击我获取数据</button>
</div>

 

源文件在附件中。

评论

2 楼 lyndon.lin 2012-05-25  

忘记把第一个create删除掉了，第一个是默认生成代码时，使用的请求是指向fixture的。
而第二个才是我们在实际应用中使用到的。

1 楼 loveni 2012-05-25  

正在学习博主的例子。

请问这里出现了2个create，是什么作用？

  	create:"/project.json",
  	create : function(attrs,success,error){
  		//需要实现servlet
  		return $.post("/projectlist",attrs,success);
  	},
 

我的测试结果是，只有后面的create起作用了。

PS.博主的附件中没有mvc和Wijmo的相关文件。如果大家要运行，需要自己下载。