मुझे अभी भी बैकबोन के साथ अपना रास्ता मिल रहा है और मैंने हमेशा अतीत में jQuery के बजाय प्रोटोटाइप का उपयोग किया है, इसलिए कृपया मुझे माफ़ कर दो अगर मैं कुछ बेवकूफ कर रहा हूं।लिंक्ड jQuery सॉर्ट करने योग्य सूचियां और बैकबोन संग्रह
मैं कई यूआई विकसित करने की कोशिश कर रहा हूं जिसमें कई कनेक्टेड अनॉर्डर्ड सूचियां हैं, जहां प्रत्येक sortable सूची को एक अलग बैकबोन संग्रह द्वारा दर्शाया जाता है। मैं आईसीनहाज़ और मूंछ टेम्पलेट्स का उपयोग कर रहा हूं लेकिन यह मेरे प्रश्न के लिए महत्वपूर्ण नहीं है।
सूचियों के बीच वस्तुओं को खींचते समय, मैं संग्रहों के स्वचालित अपडेट को सर्वोत्तम तरीके से कैसे प्राप्त करूं (एक मॉडल को हटा दें और इसे दूसरे में डालें)? मैं वर्तमान में jQueryUI सॉर्टेबल इंटरैक्शन में प्राप्त करने और विधियों को हटाने का प्रयास कर रहा हूं - क्या मैं कम से कम सही रेखाओं पर हूं?
var WS = {};
(function(ns) {
ns.Item = Backbone.Model.extend();
ns.Content = Backbone.Collection.extend({
model: ns.Item,
url: location.href,
initialize: function(el) {
this.el = $(el);
this.deferred = this.fetch();
},
recalculate: function() {
var count = this.length;
this.el.next(".subtotal").html(count);
},
setOrder: function() {
$.ajax({
url: this.url + "/reorder",
type: "POST",
data: "tasks=" + $(this.el).attr("id") + "&" + this.el.sortable("serialize")
});
}
});
ns.ContentRow = Backbone.View.extend({
tagName: "li",
className: "item",
events: {
"click .delete": "destroy"
},
initialize: function(options) {
_.bindAll(this, "render", "destroy");
this.model.bind("change", this.render);
this.model.view = this;
},
render: function() {
var row = ich.item(this.model.toJSON());
$(this.el).html(row);
return this;
},
destroy: function() {
if (confirm("Really delete?")) {
this.model.destroy({
success: function(model, response) {
$(model.view.el).remove();
},
error: function(model, response) {
console.log(response);
}
});
}
}
});
ns.ListView = Backbone.View.extend({
initialize: function(collection) {
this.el = collection.el;
this.collection = collection;
this.collection.bind("add", this.addOne, this);
_.bindAll(this, "addOne");
this.el.sortable({
axis: "y",
connectWith: ".tasks",
receive: _.bind(function(event, ui) {
// do something here?
}, this),
remove: _.bind(function(event, ui) {
// do something here?
}, this),
update: _.bind(function(event, ui) {
var list = ui.item.context.parentNode;
this.collection.setOrder();
}, this)
});
},
insert: function(item) {
var prefix = this.el.parentsUntil('ul').parent().attr("id"),
view = new ns.ContentRow({
model: item,
id: prefix + "_" + item.id
});
this.el.append(view.render().el);
},
addOne: function(item) {
if (item.isNew()) {
item.save({}, {
success: _.bind(function(model, response) {
// I should set id from JSON response when live
model.set({ id: this.collection.length });
this.insert(model);
}, this)
});
} else {
this.insert(item);
}
},
addAll: function() {
this.collection.each(this.addOne);
},
render: function() {
this.collection.deferred.done(_.bind(function() {
this.addAll();
}, this));
}
});
ns.AppView = Backbone.View.extend({
lists: [],
initialize: function(holder) {
holder.find("ul").each(_.bind(function(index, list) {
var Items = new WS.Content(list),
App = new WS.ListView(Items);
App.render();
this.lists.push(Items);
}, this));
}
});
})(WS);
$(document).ready(function() {
var App = new WS.AppView($("#tasks"));
});
बहुत स्वागत है नई कार्यक्षमता, धन्यवाद! –