大佬教程收集整理的这篇文章主要介绍了javascript – 使我的旧工作流程适应Backbone，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
BACkbone使用的正确/最佳模型是什么？
老路
用户导航到页面.
选择“创建新小部件”
向用户显示填充输入的表单
此时我可能会输入所输入的值(在通过基本验证之后),将它们包装起来并通过ajax请求将它们发送到服务器
请求返回为“OK”,用户被带到其他地方(此步骤并不完全重要)
一些基本的伪代码
// Grab values
var userName = $('.UserName').val(),dateOfBirth = $('.DateOfBirth').val();
...
...
...
$.ajax({
url: "/Webservices/Processstuff",success: function(result){
if (result) {
// Render something or doing something else
} else {
// Error message
}
},error: function () {
// Error message
}
});
骨干方式
使用与上面相同的例子;我假设我有一个用户信息模型和一个显示输入的视图.但是,处理对Web服务的实际调用是我感到困惑的事情之一.这需要去哪里？在模型或视图中单击某个“开始”按钮？
也许还有这些UserInformation模型的集合？
UserInformations = BACkbone.Collection.extend({model：Model.UserInformation’});
所以我要问的底线是……
实现此功能的最佳方法是什么？
实际执行CRUD的正确方法是什么？在哪里把实际调用删除/更新/创建/等？
您需要的几个关键项目,其中大部分已经提到过：
>骨干视图,用于协调HTML元素与您的Javascript代码
>骨干模型,用于存储用户输入到HTML元素中的所有数据
>一个后端服务器,可以通过jQuery的AJAX请求处理RESTful JSON调用
我认为你唯一缺少的是模型上有一个Save方法,它包含了调用后端服务器上的创建/更新路由的所有逻辑.该模型还有一个删除方法来处理从服务器删除.
作为一个非常简单的示例,这是一个将HTML模板呈现到屏幕的表单,将用户输入收集到模型中,然后将其保存到服务器.
一个HTML模板：
<script id="myTemplate" type="text/x-jquery-tmpl"> First name: <input id="first_name"><br/> last name: <input id="last_name"><br/> <button id="save">Save!</button> </script>
运行此代码：
@H_457_13@mymodel = BACkbone.Model.extend({ urlRoot: "/mymodel" }); MyView = BACkbone.View.extend({ template: "#myTemplate",events: { "change #first_name": "setFirstName","change #last_name: "setLastName","click #save": "save" },initialize: function(){ _.bindAll(this,"savesuccess","saveError"); },setFirstName: function(E){ var val = $(e.currentTarget).val(); this.model.set({first_name: val}); },setLastName: function(E){ var val = $(e.currentTarget).val(); this.model.set({last_name: val}); },save: function(E){ e.preventDefault(); // prevent the button click from posTing BACk to the server this.model.save(null,{success: this.savesuccess,error: this.saveError); },savesuccess: function(model,responsE){ // do things here after a successful save to the server },saveError: function(model,responsE){ // do things here after a failed save to the server },render: function(){ var html = $(this.templatE).tmpl(); $(el).html(html); } }); mymodel = new Mymodel(); myView = new MyView({model: mymodel}); myView.render(); $("#someDivOnMyPage").html(myView.el);这将为您快速启动将新模型保存回服务器的表单.
您的服务器需要执行以下操作：
>返回有效的http响应代码(200或其他一些说“一切都好”的响应)
>返回发送到服务器的JSON,包括服务器分配给模型的任何数据,例如ID字段.
服务器执行这些操作并在响应中包含Id字段非常重要.如果没有服务器的id字段,当您再次调用save时,您的模型将永远无法自我更新.它只会尝试再次在服务器上创建一个新实例.
BACkbone使用模型的id属性来确定在将数据推送到后端时是否应创建或更新模型.创建新模型和保存模型之间的区别仅在于id属性.您可以在模型上调用save,无论是新模型还是已编辑模型.
删除的工作方式相同 – 您只需在模型上调用destroy,然后回调服务器进行销毁.对于某些具有“删除”链接或按钮的HTML,您将附加到该HTML元素的click事件,就像我为“保存”按钮所示.然后在删除单击的回调方法中,您将调用this.model.destroy()并传递您想要的任何参数,例如成功和错误回调.
请注意,我也在模型中包含了urlRoot.如果模型不是集合的一部分,则需要在模型上使用此函数或url函数.如果模型是集合的一部分,则集合必须指定url.
我希望有所帮助.
以上是大佬教程为你收集整理的javascript – 使我的旧工作流程适应Backbone全部内容，希望文章能够帮你解决javascript – 使我的旧工作流程适应Backbone所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。