Backbone List View Widget Initial Commit

pull/210/head
Michael Jett 2012-08-28 12:49:33 -04:00
parent 0aa6da67de
commit 59e2f0e127
2 changed files with 83 additions and 75 deletions

View File

@ -13,6 +13,85 @@
});
var ListWidgetView = Backbone.View.extend({
tagName: "table",
childView: Backbone.View.extend({
tagName: 'tr',
events:{
"click .icon-minus-sign":function () {
this.$el.tooltip('destroy');
this.model.destroy();
}
},
initialize:function () {
if (!this.template) {
this.template = _.template($('#tmpl-list-widget-child').html());
}
this.model.bind('destroy', this.remove, this);
},
render:function () {
this.$el.html(this.template(this.model.toJSON()));
if (this.model.get('uri').length > 27)
this.$el.tooltip({title:this.model.get('uri')});
return this;
}
}),
events:{
"click button": "addItem"
},
initialize:function () {
if (!this.template) {
this.template = _.template($('#tmpl-list-widget').html());
}
this.$el.addClass("table-condensed");
this.collection.bind('add', this.render, this);
},
addItem:function() {
var input_value = $("input", this.el).val().trim();
var uri = new URIModel({uri:input_value});
// if it's valid and doesn't already exist
if (uri.isValid() && this.collection.where({uri: input_value}).length < 1) {
this.collection.add(uri);
}
},
render:function (eventName) {
this.$el.html(this.template());
_self = this;
_.each(this.collection.models, function (model) {
var el = new this.childView({model:model}).render().el;
$("tbody", _self.el).append(el);
}, this);
return this;
}
});
var ClientModel = Backbone.Model.extend({
idAttribute: "id",
@ -89,77 +168,6 @@
var URIView = Backbone.View.extend({
tagName: 'tr',
events:{
"click .icon-minus-sign":function() { this.model.destroy(); }
},
initialize:function () {
if (!this.template) {
this.template = _.template($('#tmpl-uri').html());
}
this.model.bind('destroy', this.remove, this);
},
render:function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
var URIListView = Backbone.View.extend({
tagName: "table",
events:{
"click button": "addItem"
},
initialize:function () {
if (!this.template) {
this.template = _.template($('#tmpl-uri-list').html());
}
this.$el.addClass("table-condensed");
this.collection.bind('add', this.render, this);
},
addItem:function() {
var input_value = $("input", this.el).val().trim();
var uri = new URIModel({uri:input_value});
// if it's valid and doesn't already exist
if (uri.isValid() && this.collection.where({uri: input_value}).length < 1) {
this.collection.add(uri);
}
},
render:function (eventName) {
this.$el.html(this.template());
_self = this;
_.each(this.collection.models, function (model) {
var el = new URIView({model:model}).render().el;
$("tbody", _self.el).append(el);
}, this);
return this;
}
});
var BreadCrumbView = Backbone.View.extend({
tagName: 'ul',
@ -422,7 +430,7 @@
_self.registeredRedirectUriCollection.add(new URIModel({uri:registeredRedirectUri}));
});
$("#registeredRedirectUri .controls",this.el).html(new URIListView({collection: this.registeredRedirectUriCollection}).render().el);
$("#registeredRedirectUri .controls",this.el).html(new ListWidgetView({collection: this.registeredRedirectUriCollection}).render().el);
return this;
},

View File

@ -220,12 +220,12 @@
<% } %>
</script>
<script type="text/html" id="tmpl-uri">
<td><%=uri%></td>
<script type="text/html" id="tmpl-list-widget-child">
<td><%=(uri.length > 27) ? uri.substr(0,27) + '...' : uri %></td>
<td><i class="icon-minus-sign icon-gray"></i></td>
</script>
<script type="text/html" id="tmpl-uri-list">
<script type="text/html" id="tmpl-list-widget">
<tbody>
<tr>
<td><input type="text" value="" placeholder="http://"></td>