Backbone - 从 DOM 或 Collection 获取用户选择的数据

Question

我有一个BackboneCollection（名为themeCollection）列出了哪些项目在网页上 (DOM)。用户可以 select 该列表中的一项。我需要将用户的 selected 项目与其他信息一起保存到数据库中。我想到了两种实现此功能的方法。

1) 从 DOM 中获取 selected 列表项（通过 jquery）

addCard: function(e) {
            e.preventDefault();

            var formData = {};

            // Get data from the form
            $( '#modal-new-card form' ).children( 'input' ).each( function( i, el ) {
                if ( $(el).val() != '' ) {
                    formData[ el.id ] = $(el).val();
                }
                $(el).val('');
            });


            // Get selected listed item from the DOM.
            formData['theme'] = this.$el.find('div.colorSelected').attr('color');

            // Code for saving into the database
            // ...

        }

2) 从 Backbone Collection

中获取 selected 列表项

addCard: function(e) {
        e.preventDefault();

        var formData = {};

        $( '#modal-new-card form' ).children( 'input' ).each( function( i, el ) {
            if ( $(el).val() != '' ) {
                formData[ el.id ] = $(el).val();
            }
            $(el).val('');
        });

        formData['theme'] = this.themeCollection.findWhere({selected: true});
    }

第一种方式在我看来有点别扭。它触及 DOM，因此它与 DOM 紧密耦合。这不好。每当更改 CSS class 时，我的应用程序就会停止工作。

第二种方法是多做一些工作。每当用户单击时，我必须将 themeModel's selected 属性更改为 true。更改时，我还必须将 false 设置为 selected collection.

中所有其他模型的属性

哪种方式更好？如果大家有其他的方法，欢迎分享给我，推荐一下。

Answer 1

看起来你不应该像 Collection 那样存储它。

如果只是选择颜色，最好将其存储为模型属性({"theme": "purple"})，然后将此模型发送到服务器。

标记：

<input type="radion" name="theme" value="yellow">
<input type="radion" name="theme" value="purple">

您的看法：

function changeTheme() {
  var cardData = this.$el.serializeArray(); // jQuery just for brevity

  this.model.trigger('THEME_CHANGE', cardData);
}

Backbone.Collection.extend({
  tagName: 'form',

  events: {
    'change [name="theme"]': changeTheme
  }
});

模型只监听 THEME_CHANGE 并处理数据。

Answer 2

看来您需要了解更多有关 Backbone 的信息，但我会尽力提供帮助...

您应该使用 Model 来维护表单数据，并通过 View 添加事件以在情况发生变化时更新模型。提交后，您可以调用model.toJSON()保存到数据库。

var NewCard = Backbone.Model.extend({

    defaults: {
        question: '',
        explanation: '',
        color: 'Blue'
    }

})

然后设置一个集合来保存颜色 select

var colors = new Backbone.Collection([
  {color: 'Blue'},
  {color: 'Gray'}
]);

Here is a working example

这个例子还很不完整，但应该给你一张图片。

Backbone - 从 DOM 或 Collection 获取用户选择的数据

Backbone - Get user's selected data from DOM or Collection

javascript

dom

backbone.js

backbone-views

backbone.js-collections

1) 从 DOM 中获取 selected 列表项（通过 jquery）

2) 从 Backbone Collection

Here is a working example