我可以在不手动跟踪模糊事件的情况下将表单输入绑定到backbone.js中的模型吗?
-
28-09-2019 - |
题
我有一个backbone.js应用(www.github.com/juggy/job-board)我想将表单输入直接绑定到我的模型(LA Sproutcore)的位置。
backbone.js(或其他工具)是否可以实际跟踪输入上的每个模糊事件并手动更新模型?这似乎是很多胶水代码。
谢谢,
朱利安
解决方案
我不确定SC如何做到这一点,但也许他们也聆听活动。
window.SomeView = Backbone.View.extend({
events: {
"change input.content": "contentChanged"
},
initialize: function() {
_.bindAll(this, 'contentChanged');
this.inputContent = this.$('input.content');
},
contentChanged: function(e) {
var input = this.inputContent;
// if you use local storage save
this.model.save({content: input.val()});
// if you send request to server is prob. good idea to set the var and save at the end, in a blur event or in some sync. maintenance timer.
// this.model.set({content: input.val()});
}
});
其他提示
如果您的模型中包含许多属性,则可以更好地处理此问题。
SampleView = Backbone.View.extend({
el: "#formEl",
events: {
"change input": "changed",
"change select": "changed"
},
initialize: function () {
_.bindAll(this, "changed");
},
changed:function (evt) {
var changed = evt.currentTarget;
var value = $(evt.currentTarget).val();
var obj = {};
obj[changed.id] = value;
this.model.set(obj);
}
});
依赖您的输入元素具有与模型中属性名称相同的ID。
我认为这是一种从输入元素创建对象的清洁(甚至更快)的方法
changed: function(evt) {
var target = $(evt.currentTarget),
data = {};
data[target.attr('name')] = target.val();
this.model.set(data);
},
没有jQuery:
changed: function(evt) {
var target = evt.currentTarget,
data = {};
data[target.name] = target.value;
this.model.set(data);
},
您是否尝试过Backbone.modelbinder?做您需要的事情是不错的工具: https://github.com/theironcook/backbone.modelbinder
我正在研究Corset,这是一个由Django Forms模块启发的Backbone.js的表单库,但范围却少一些。仍在研究扭结,但至少半稳定且功能性时,它最终会在GitHub上。
紧身胸衣的目的是具有易于子分类的字段类,以便您可以为更复杂的用例(级联选择等)构建复杂的输入。此方法将每个字段作为单独的视图呈现,并且表单视图绑定到模型,并使用更改事件,模糊事件或提交事件以更新模型(可配置,默认为模糊)。每个视图都有一个可填充的GETDATA函数,该功能可通过默认地图为jQuery .val()函数。
使用明智的默认值和ModelFormFactory函数,我们使用紧身胸衣(或实际完成的子集)进行快速开发,使用明智的属性名称定义模型,使用ModelforMfactory,并且您具有即时编辑UI。
我在网站上创建了以下技术
class FooView extends MyView
tag: "div"
modelBindings:
"change form input.address" : "address"
"change form input.name" : "name"
"change form input.email" : "email"
render: ->
$(@el).html """
<form>
<input class="address"/>
<input class="name"/>
<input class="email"/>
</form>
"""
super
@
# Instantiate the view
view = new FooView
model: new Backbone.Model
$("body").html(view.el)
我已经详细介绍了您需要在我的博客上制作的骨干的扩展
http://xtargets.com/2011/06/11/binding-model-attributes-to-form-elements-with-backbone-js/
它使用与绑定表单元素的事件属性相同的声明样式来建模属性
这是在Coffeescript中为您实施课程的实际代码
class MyView extends Backbone.View
render: ->
if @model != null
# Iterate through all bindings
for selector, field of @modelBindings
do (selector, field) =>
console.log "binding #{selector} to #{field}"
# When the model changes update the form
# elements
@model.bind "change:#{field}", (model, val)=>
console.log "model[#{field}] => #{selector}"
@$(selector).val(val)
# When the form changes update the model
[event, selector...] = selector.split(" ")
selector = selector.join(" ")
@$(selector).bind event, (ev)=>
console.log "form[#{selector}] => #{field}"
data = {}
data[field] = @$(ev.target).val()
@model.set data
# Set the initial value of the form
# elements
@$(selector).val(@model.get(field))
super
@
如果您不喜欢CoffeeScript,请使用。我愿意。每个人都不同:)