歡迎來到 常識詞典網 ， 一個專業的常識知識學習網站！
[ Ctrl + D 鍵 ]收藏本站
答案 1：
我在你的應用場景下做了點測試，在沒有修改BackBone任何源代碼的情況下實現了你的需求，下面是具體的解決方案: 按照你的需要定義Model，Collection，ItemView，AppView，其中ItemView具體是你需要更新的原子視圖，而AppView是應用程序視圖； ItemViewA和ItemViewB應該分布在兩個不同的AppView實例中，要做到這點也很容易，因為從業務邏輯上來講，相同的數據分布在不同的地方可以看成是不同的應用域，上面幾個的關系是： Collection擁有多個Model，Model定義了數據的操作，每個ItemView對應1個Model，而1個AppView對應1個Collection，因為在javascript中的對象是按引用傳遞的，兩個AppView的實例所引用的Collection實際指向相同的對象，這樣當AppViewA中的某個ItemViewA觸發某種事件，肯定會自動的觸發最底層的同1個Model的事件。 這樣說來可能有點抽象，我根據官方示例的Todos應用改了改，下面是相關的代碼，重點需要注意的部分用黑體字標出，你很快就明白了。 主要的客戶端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屬性，因為是兩個不同的應用 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); } }); // 在兩個不同的地方創建兩個AppView實例，其中1個App更新之后，另外1個也會隨著更新 var App = new AppView({element: "#todoapp"}); var App2 = new AppView({element: "#todoapp2"}); 應用的后端我采用的CakePHP做的，如果需要的話，我可以將整個應用的代碼和數據庫結構打包發給你答案 2：
你可以把c-ange事件綁定在collection上[1]。 [1]: documentcloud.git-ub/backbone...下一篇:最近互聯網公司給員工提供的免息置業貸款，可以用來支付首付嗎？ 下一篇 【方向鍵 ( → )下一篇】
上一篇:制定日常生活計劃表有哪些需要注意的？ 上一篇 【方向鍵 ( ← )上一篇】
快搜
