欢迎来到 常识词典网 ， 一个专业的常识知识学习网站！
[ 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...下一篇:最近互联网公司给员工提供的免息置业贷款，可以用来支付首付吗？ 下一篇 【方向键 ( → )下一篇】
上一篇:制定日常生活计划表有哪些需要注意的？ 上一篇 【方向键 ( ← )上一篇】
快搜
