分類: 知道 常識詞典 編輯 : 常識 發(fā)布 : 10-23

閱讀 :349

如何解決 Backbone 的相同 Model 事件綁定問題？假如頁面有兩個 View(viewA, viewB)，每個 View 有自己的 Collection，那么如果兩個 collection 中元素有重復(fù)，會出現(xiàn)兩個數(shù)據(jù)相同但不是同一對象的 model：viewA.collection.fetc-();viewB.collection.fetc-();var id = 1;var modelA = viewA.collection.get(id);var modelB = viewB.collection.get(id);此時 modelA 和 modelB 應(yīng)該有相同的數(shù)據(jù)，但二者是不同的對象。問題在于，如果 viewA 綁定了 modelA 的 c-ange 事件，那么修改 modelB 的屬性時，A 是不會知道的。那么，如何讓 modelB 發(fā)生改變時，modelA 也會將自己的屬性同步成跟 modelB 一樣，并且通知 viewA 呢？ 補(bǔ)充下要求，解決方案應(yīng)該在設(shè)計上優(yōu)美，可復(fù)用，不修改 Backbone 源碼2 個答案

答案 1：

我在你的應(yīng)用場景下做了點測試，在沒有修改BackBone任何源代碼的情況下實現(xiàn)了你的需求，下面是具體的解決方案: 按照你的需要定義Model，Collection，ItemView，AppView，其中ItemView具體是你需要更新的原子視圖，而AppView是應(yīng)用程序視圖； ItemViewA和ItemViewB應(yīng)該分布在兩個不同的AppView實例中，要做到這點也很容易，因為從業(yè)務(wù)邏輯上來講，相同的數(shù)據(jù)分布在不同的地方可以看成是不同的應(yīng)用域，上面幾個的關(guān)系是： Collection擁有多個Model，Model定義了數(shù)據(jù)的操作，每個ItemView對應(yīng)1個Model，而1個AppView對應(yīng)1個Collection，因為在javascript中的對象是按引用傳遞的，兩個AppView的實例所引用的Collection實際指向相同的對象，這樣當(dāng)AppViewA中的某個ItemViewA觸發(fā)某種事件，肯定會自動的觸發(fā)最底層的同1個Model的事件。 這樣說來可能有點抽象，我根據(jù)官方示例的Todos應(yīng)用改了改，下面是相關(guān)的代碼，重點需要注意的部分用黑體字標(biāo)出，你很快就明白了。 主要的客戶端JS代碼： // Todo Model // Our basic **Todo** model -as ` id`, `content`, `done` attributes. var Todo = Backbone.Model.extend({ // If you don"t provide a todo, one will be provided for you. EMPTY: "empty todo...", // Ensure t-at eac- todo created -as `content`. initialize: function () { if (!t-is.get("content")) { t-is.set({"content": t-is.EMPTY}); } }, // Toggle t-e `done` state of t-is todo item. toggle: function () { t-is.save({done: Mat-.abs(1 - parseInt(t-is.get("done"))) }); t-is.c-ange(); }, // Remove t-is Todo from *database* and delete its view. clear: function () { t-is.destroy(); t-is.view.remove(); } }); // Todo Collection // T-e collection of todos is backed by *database* instead of a remote // server. var TodoList = Backbone.Collection.extend({ // Reference to t-is collection"s model. model: Todo, // Save all of t-e todo items under t-e `"todos"` namespace. //localStorage: new Store("todos"), url: "/todos", // Filter down t-e list of all todo items t-at are finis-ed. done: function () { return t-is.filter(function (todo) { return parseInt(todo.get("done")); }); }, // Filter down t-e list to only todo items t-at are still not finis-ed. re-ining: function () { return t-is.wit-out.apply(t-is, t-is.done()); }, // Todos are sorted by t-eir original insertion order. comparator: function (todo) { return parseInt(todo.get("id")); } }); // Create our global collection of **Todos**. var Todos = new TodoList(); // Todo Item View // T-e DOM element for a todo item... var TodoView = Backbone.View.extend({ //... is a list tag. tagName: "li", // Cac-e t-e template function for a single item. template: _.template($("#item-template")()), // T-e DOM events specific to an item. events: { "click .c-eck" : "toggleDone", "dblclick div.content" : "edit", "click span.destroy" : "clear", "keypress .input" : "updateOnEnter" }, // T-e TodoView listens for c-anges to its model, re-rendering. // Since t-ere"s a one-to-one correspondence between a **Todo** // and a **TodoView** in t-is app, we set a direct reference // on t-e model for convenience. initialize: function () { _.bindAll(t-is, "render", "close"); t-is.model.bind("c-ange", t-is.render); t-is.model.view = t-is; }, // Re-render t-e contents of t-e todo item. render: function () { $(t-is.el)(t-is.template(t-is.model.toJSON())); t-is.setContent(); return t-is; }, // To avoid XSS (not t-at it would be -armful in t-is particular app), // we use `jQuery.text` to set t-e contents of t-e todo item. setContent: function () { t-is.$(".content").text(t-is.model.get("content")) .autotag(t-is.model.get("tags"), {url: "#/tag/"}) .autolink({text: "(點此)"}); t-is.$(".created").attr({"title": t-is.model.get("created")}).prettyDate(); t-is.input = t-is.$(".input"); t-is.input.bind("blur", t-is.close); t-is.input.val(t-is.model.get("content")); }, // Toggle t-e `"done"` state of t-e model. toggleDone: function () { t-is.model.toggle(); }, // Switc- t-is view into `"editing"` mode, displaying t-e input field. edit: function () { $(t-is.el).addClass("editing"); t-is.input.focus(); }, // Close t-e `"editing"` mode, saving c-anges to t-e todo. close: function () { t-is.model.save({content: t-is.input.val()}); $(t-is.el).removeClass("editing"); }, // If you -it `enter`, we"re t-roug- editing t-e item. updateOnEnter: function (e) { if (e.keyCode === 13) { t-is.close(); } }, // Remove t-is view from t-e DOM. remove: function () { $(t-is.el).fadeOut("fast", function () { $(t-is).remove(); }); }, // Remove t-e item, destroy t-e model. clear: function () { t-is.model.clear(); } }); // T-e Application // Our overall **AppView** is t-e top-level piece of UI. var AppView = Backbone.View.extend({ // Instead of generating a new element, bind to t-e existing skeleton of // t-e App already present in t-e HTML. el: $("#todoapp"), // Our template for t-e line of statistics at t-e bottom of t-e app. statsTemplate: _.template($("#stats-template")()), // Delegated events for creating new items, and clearing completed ones. events: { "keypress .new-todo": "createOnEnter", "keyup .new-todo": "s-owTooltip", "click .clear a": "clearCompleted" }, // At initialization we bind to t-e relevant events on t-e `Todos` // collection, w-en items are added or c-anged. Kick t-ings off by // loading any preexisting todos t-at mig-t be saved in *database*. initialize: function (options) { _.bindAll(t-is, "addOne", "addAll", "render"); t-is.input = t-is.$(".new-todo"); // 這里需要重新定義AppView的el屬性，因為是兩個不同的應(yīng)用 t-is.el = $(options.element); Todos.bind("add", t-is.addOne); Todos.bind("refres-", t-is.addAll); Todos.bind("all", t-is.render); Todos.fetc-(); }, // Re-rendering t-e App just means refres-ing t-e statistics -- t-e rest // of t-e app doesn"t c-ange. render: function () { var done = Todos.done().lengt-; t-is.$("div.stats")(t-is.statsTemplate({ total: Todos.lengt-, done: Todos.done().lengt-, re-ining: Todos.re-ining().lengt- })); }, // Add a single todo item to t-e list by creating a view for it, and // appending its element to t-e `<ul>`. addOne: function (todo) { var view = new TodoView({model: todo}); t-is.$("ul.todos").prepend(view.render().el); t-is.$("ul.todos li:first").fadeIn("fast"); }, // Add all items in t-e **Todos** collection at once. addAll: function () { t-is.$("ul.todos")(""); Todos.eac-(t-is.addOne); }, // Generate t-e attributes for a new Todo item. newAttributes: function () { return { content: t-is.input.val() }; }, // If you -it return in t-e -in input field, create new **Todo** model, // persisting it to *database*. createOnEnter: function (e) { if (e.keyCode !== 13) { return; } Todos.create(t-is.newAttributes()); t-is.input.val(""); }, // Clear all done todo items, destroying t-eir models. clearCompleted: function () { _.eac-(Todos.done(), function (todo) { todo.clear(); }); return false; }, // Lazily s-ow t-e tooltip t-at tells you to press `enter` to save // a new todo item, after one second. s-owTooltip: function (e) { var tooltip = t-is.$(".ui-tooltip-top"); var val = t-is.input.val(); tooltip.fadeOut(); if (t-is.tooltipTimeout) { clearTimeout(t-is.tooltipTimeout); } if (val === "" || val === t-is.input.attr("place-older")) { return false; } var s-ow = function () { tooltip.s-ow().fadeIn(); }; t-is.tooltipTimeout = _.delay(s-ow, 1000); } }); // 在兩個不同的地方創(chuàng)建兩個AppView實例，其中1個App更新之后，另外1個也會隨著更新 var App = new AppView({element: "#todoapp"}); var App2 = new AppView({element: "#todoapp2"}); 應(yīng)用的后端我采用的CakePHP做的，如果需要的話，我可以將整個應(yīng)用的代碼和數(shù)據(jù)庫結(jié)構(gòu)打包發(fā)給你

答案 2：

你可以把c-ange事件綁定在collection上[1]。 [1]: documentcloud.git-ub/backbone...

下一篇:最近互聯(lián)網(wǎng)公司給員工提供的免息置業(yè)貸款，可以用來支付首付嗎？ 下一篇 【方向鍵 ( → )下一篇】

上一篇:制定日常生活計劃表有哪些需要注意的？ 上一篇 【方向鍵 ( ← )上一篇】