Backbone List View Widget Initial Commit
parent
0aa6da67de
commit
59e2f0e127
|
@ -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;
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue