Knockout.js observableArray 与 Backbone.js Collection - 有什么区别?

发布于 2024-12-25 12:21:31 字数 849 浏览 0 评论 0原文

在 Knockout.js 中,我创建一个 observableArray 将模型推入:

function Room(data) {
        this.name = ko.observable(data.name);

    }   


    function RoomViewModel() {      
        var self = this;
        self.rooms = ko.observableArray([]);
        self.newRoomText = ko.observable();         

        self.addRoom = function() {
            self.rooms.push(new Room({ name: this.newRoomText() }));
            self.newRoomText("");       
            $("#modal").dialog("close");        
        }.bind(self);           
    }

在 Backbone.js 中,我将创建一个集合来存储我的模型:

var Book = Backbone.Model.extend();

var Books = new Backbone.Collection([
  {name: "Abe Lincoln - Vampire Hunter"}
  {name: "Pride and Prejudice and Zombies"}
]);

这两种结构彼此有何不同?

幕后究竟发生了什么使这些数据结构与标准 Javascript 数组不同?

In Knockout.js I create an observableArray to push models into:

function Room(data) {
        this.name = ko.observable(data.name);

    }   


    function RoomViewModel() {      
        var self = this;
        self.rooms = ko.observableArray([]);
        self.newRoomText = ko.observable();         

        self.addRoom = function() {
            self.rooms.push(new Room({ name: this.newRoomText() }));
            self.newRoomText("");       
            $("#modal").dialog("close");        
        }.bind(self);           
    }

In Backbone.js I would create a collection to store my models:

var Book = Backbone.Model.extend();

var Books = new Backbone.Collection([
  {name: "Abe Lincoln - Vampire Hunter"}
  {name: "Pride and Prejudice and Zombies"}
]);

Just how different are these 2 structures from each other?

What exactly is going on behind the scenes to make these data structures different from a standard Javascript Array?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

飘落散花 2025-01-01 12:21:31

这是一个很难完全回答的问题,但这是我的看法:)。

Backbone.js Collection

  • 从服务器获取模型,
  • 更改/添加/删除事件
  • 触发监听模型的 事件并在集合上触发它们
  • 自动验证模型
  • 许多跨浏览器的便捷方法用于处理集合(each、max、sort、reduce 等)

Knockout.js observableArray

  • 跟踪添加和删除的元素 - 自动更新 UI
  • 数组方法的跨浏览器实现(例如,IE8 存在问题,本机 .indexOf())
  • 便利 destroy & Rails 开发人员的 destroyAll 方法将对象上的 _destroy 属性设置为 true - 这将通知 Rail 的 ActiveRecord 应删除哪些对象。

Backbone.Collection 与 Backbone.js 框架配合使用,而 observableArray 仅与 Knockout.js 配合使用。单独比较它们是没有实际意义的,因为它们是框架的一部分,如果您的应用程序是基于 Backbone 构建的,则不能使用 observableArray,反之亦然。

如果您想知道幕后到底发生了什么,那么这里是源代码:

This is a difficult question to fully answer but here is my take on it :).

Backbone.js Collection:

  • fetching models from the server
  • triggering change/add/remove events
  • listening to model events and triggering them on collections
  • automatic validation of the models
  • lot of cross-browser convience methods for working with collections (each, max, sort, reduce, etc.)

Knockout.js observableArray:

  • tracks added and removed elements - updates UI automatically
  • cross-browser implementation of the array's methods (e.g. IE8 has problems w/ native .indexOf())
  • convience destroy & destroyAll methods for Rails developer that will set _destroy property on objects to true - this will inform Rail's ActiveRecord which objects should be deleted.

Backbone.Collection is working with the Backbone.js framework and observableArray only with Knockout.js. There is no real in comparing them with each other in a isolation because they are part of a framework and if your application is built on Backbone you cannot use observableArray and vice versa.

If you want to know what exactly is going on behind the scenes then here is the source code:

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文