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

Question

我有一个 Backbone Collection （名为 themeCollection ），哪些项目列在网页（DOM）上。用户可以从该列表中选择一个项目。我需要将用户选择的项目与其他信息一起保存到数据库中。它有两种方式来实现这个功能。

1）从DOM中获取所选列表项（通过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

中获取所选列表项

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 所选属性更改为 true 。更改时，我还必须将false设置为集合中所有其他模型的选定属性。

哪种方式会是更好的选择？如果您有其他方式，请与我分享并建议我。

Answer 1

看起来你不应该像收藏一样存储它。

如果只是选择颜色，最好将其存储为模型属性（<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

模型只需监听long c = ((long)a << 32) | ((long)b & 0xFFFFFFFL);并处理数据。

Answer 2

您似乎需要了解有关Backbone的更多信息，但我会尽力帮助......

您应该使用Model来维护表单数据，并通过View添加事件，以便在更改时更新模型。提交后，您可以致电model.toJSON()保存到数据库。

var NewCard = Backbone.Model.extend({

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

})

然后设置一个集合来保存颜色以选择

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

Here is a working example

这个例子远非完整，但应该给你一张照片。