Wil*_*ver 14 javascript backbone.js
我有一个简单的视图,当模型更改时,它会自动绑定到重绘,因为大多数指南都指示:
this.model.bind('change', this.render, this);
此视图具有带输入框和提交按钮的表单.我绑定到输入框的"更改"事件以更改模型上的相关项.(我可以手动执行此操作,也可以使用ModelBinder项目,以相同的方式工作.)
用户更改表单输入框中的值,然后单击提交按钮.更新模型,重新呈现视图和表单.提交按钮的单击事件被压缩.
我正在使用Backbone的events属性:
events : {
'submit form' : 'save'
},
我知道事件被忽略了,因为点击的DOM元素不再存在.我可以在render()中放置一个小的setTimeout,以防止HTML被换出,并且事情按预期工作,但这需要等待.
我不能成为第一个与此斗争的人 - 在不丢失一些关键点击或按键信息的情况下,捕获表单"更改"事件,更新模型和重绘视图的标准方法是什么？
类似地,如果我有多个表单项,则在重新绘制表单后,用户无法在更改内容之后在项目之间进行选项卡.
仍在努力寻找一个好的解决方案.我试过的事情:
其中一条评论要求提供一些代码.我已经将代码大量简化为一页并将其包含在下面.实际的应用程序要复杂得多.下面的代码很简单,我可以手动重新渲染页面的部分内容.在实际的应用程序中,我使用的是dustjs模板,即使我不重新渲染表单,但重新渲染包含表单的元素,我点击提交时也会遇到问题.我希望有一种典型的骨干应用程序"模式",包括复杂的页面,模型和表单.
大多数"演示"应用程序甚至我使用主干网看到的网站似乎主要是以演示为中心的应用程序,实际上并没有从用户那里收集大量信息.如果您知道基于主干的良好的数据收集重点应用程序/演示将会有所帮助.
码:
<!doctype html>
<html lang="en">
<head>
<script src="libs/jquery.js"></script>
<script src="libs/underscore.js"></script>
<script src="libs/backbone.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/template" id="edit_user_template">
<h3>Edit User <%=id%> : <%=name%></h3>
<form>
Name: <input type="text" name="name" value="<%=name%>"><br/>
Email: <input type="text" name="email" value="<%=email%>"><br/>
<input type="submit">
</form>
</script>
<script>
var UserModel = Backbone.Model.extend({});
var model = new UserModel({id: '1', name:'Joe', email:'a@a.com'});
var UserView = Backbone.View.extend({
events : {
'submit form' : 'save',
'change input' : 'inputChange'
},
initialize: function(){
this.model.bind('change', this.render, this);
},
render: function(){
var template = _.template($('#edit_user_template').html(), this.model.toJSON());
this.$el.html(template);
},
inputChange : function(evt){
var target = $(evt.currentTarget);
this.model.set(target.attr('name'), target.val());
},
save : function(event){
console.log('saving');
event.preventDefault();
//this.model.save();
}
});
var view = new UserView({model: model, el: '#container'});
view.render();
</script>
</body>
</html>
小智 0
不太明白你想做什么，看代码我明白你想模拟knockoutjs的绑定模型，这太棒了。
\n\n不管怎样，如果你分成两个在同一模型上运行的视图，你可以获得类似的 \xc2\xabeffect\xc2\xbb 。一个更新模型，而另一个观察更改并自动更新。
\n\n这是代码：
\n\n<!doctype html>\n<html lang="en">\n<head>\n <script src="libs/jquery.min.js"></script>\n <script src="libs/underscore.min.js"></script>\n <script src="libs/backbone.min.js"></script>\n</head>\n<body>\n <div id="header"></div>\n <div id="container"></div>\n<script type="text/template" id="user_template">\n <h3>Edit User <%=id%> : <%=name%></h3>\n</script>\n<script type="text/template" id="edit_user_template">\n <form>\n Name: <input type="text" name="name" value="<%=name%>"><br/>\n Email: <input type="text" name="email" value="<%=email%>"><br/>\n <input type="submit">\n </form>\n</script>\n<script>\n var UserModel = Backbone.Model.extend({});\n var model = new UserModel({id: \'1\', name:\'Joe\', email:\'a@a.com\'});\n\n var UserView = Backbone.View.extend({\n initialize: function(){\n this.model.on("change", this.render, this);\n },\n render: function(){\n var template = _.template($(\'#user_template\').html(), this.model.toJSON());\n this.$el.html(template);\n return this;\n },\n });\n\n var FormView = Backbone.View.extend({\n events : {\n \'submit form\' : \'save\',\n \'keyup input\' : \'inputChange\'\n },\n render: function(){\n var template = _.template($(\'#edit_user_template\').html(), this.model.toJSON());\n this.$el.html(template);\n return this;\n },\n inputChange : function(evt){\n console.log(\'change\');\n var target = $(evt.currentTarget);\n this.model.set(target.attr(\'name\'), target.val());\n },\n save : function(event){\n console.log(\'saving\');\n event.preventDefault();\n //this.model.save();\n }\n });\n\n var user = new UserView({model: model, el: \'#header\'});\n user.render();\n\n var form = new FormView({model: model, el: \'#container\'});\n form.render();\n</script>\n</body>\n</html>\n