javascript - 使用 Backbone-relational 在 Backbone 中创建嵌套模型

Question

我想使用 backbone-relational在我的 backbone.js 中嵌套模型应用。

我已经能够按照文档中的示例创建嵌套对象(例如一对多关系)。但是我不明白如何以更新上层对象的方式绑定(bind)下层元素。我认为一个可用的应用程序将是一个非常有用的教程。

所以我的问题是:如何扩展 Todos tutorial使用 backbone-relational这样:

• 可以为每个项目添加/删除子项目
• 双击任何子项目对其进行编辑(就像原始的 Todo 示例一样)
• 点击一个项目隐藏/显示它的子项目
• 子项不是单独获取的，而只是 Todo 项的数组属性

更新:我有created a jsfiddle for this question .到目前为止，我有:

• 导入了上面提到的 Todo 示例
• 创建了一个 TodoSubitem模型和一个 TodoSubitemList收藏
• 修改了 Todo扩展模型 RelationalModel而不是 Model , 与 HasMany关于 TodoSubitem
• 添加了 subitem-template在 html 代码中

但我仍然不确定如何:

• 为 subitems 添加一个输入字段仅当您单击 Todo 时才会出现股本
• 将子项数据作为 Todo 的属性对象，但仍有 TodoSubitemView将 DOM 元素绑定(bind)到它们(例如 <li> 标签)。

Answer 1

在这种情况下，我不认为我会创建一个单独的“TodoSubItem”——为什么不从 Todo->Todo 创建一个 HasMany 关系，这样一个 Todo 可以有 0..* children, 和 0..1 parent?

这样，您可以重新使用顺序逻辑(如果您将其更改为按集合应用)，可以根据需要创建更深的嵌套级别(或者将其限制在一定深度，如果您也愿意)，等等。但是，为了适应这一点，需要更新许多内容 - 例如，保留 subview 列表，以便您可以遍历它们以将每个 View 标记为已完成，并维护(和更新)每个 TodoList 的顺序。

无论如何，一个可能的解决方案的粗略概述可以帮助您入门，作为与您当前版本的一种差异(抱歉，它完全未经测试，因此可能包含可怕的错误):

//Our basic **Todo** model has `text`, `order`, and `done` attributes.
window.Todo = Backbone.RelationalModel.extend({

    relations: [{
        type: Backbone.HasMany,
        key: 'children',
        relatedModel: 'Todo',
        collectionType: 'TodoList',
        reverseRelation: {
            key: 'parent',
            includeInJSON: 'id'
        }
    }],

    initialize: function() {
        if ( !this.get('order') && this.get( 'parent' ) ) {
            this.set( { order: this.get( 'parent' ).nextChildIndex() } );
        }
    },

    // Default attributes for a todo item.
    defaults: function() {
        return { done: false };
    },

    // Toggle the `done` state of this todo item.
    toggle: function() {
        this.save({done: !this.get("done")});
    }

    nextChildIndex: function() {
        var children = this.get( 'children' );
        return children && children.length || 0;
    }
});


// The DOM element for a todo item...
window.TodoView = Backbone.View.extend({

    //... is a list tag.
    tagName:  "li",

    // Cache the template function for a single item.
    template: _.template($('#item-template').html()),

    // The DOM events specific to an item.
    events: {
        'click': 'toggleChildren',
        'keypress input.add-child': 'addChild',
        "click .check"              : "toggleDone",
        "dblclick div.todo-text"    : "edit",
        "click span.todo-destroy"   : "clear",
        "keypress .todo-input"      : "updateOnEnter"
    },

    // The TodoView listens for changes to its model, re-rendering.
    initialize: function() {
        this.model.bind('change', this.render, this);
        this.model.bind('destroy', this.remove, this);

        this.model.bind( 'update:children', this.renderChild );
        this.model.bind( 'add:children', this.renderChild );

        this.el = $( this.el );

        this.childViews = {};
    },

    // Re-render the contents of the todo item.
    render: function() {
        this.el.html(this.template(this.model.toJSON()));
        this.setText();

        // Might want to add this to the template of course
        this.el.append( '<ul>', { 'class': 'children' } ).append( '<input>', { type: 'text', 'class': 'add-child' } );

        _.each( this.get( 'children' ), function( child ) {
            this.renderChild( child );
        }, this );

        return this;
    },

    addChild: function( text) {
        if ( e.keyCode == 13 ) {
            var text = this.el.find( 'input.add-child' ).text();
            var child = new Todo( { parent: this.model, text: text } );
        }
    },

    renderChild: function( model ) {
        var childView = new TodoView( { model: model } );
        this.childViews[ model.cid ] = childView;
        this.el.find( 'ul.children' ).append( childView.render() );
    },

    toggleChildren: function() {
        $(this.el).find( 'ul.children' ).toggle();
    },

    // Toggle the `"done"` state of the model.
    toggleDone: function() {
        this.model.toggle();
        _.each( this.childViews, function( child ) {
            child.model.toggle();
        });
    },

    clear: function() {
        this.model.set( { parent: null } );
        this.model.destroy();
    }

    // And so on...
});