骨干模型：如何添加自定義屬性，該屬性結合了其他屬性的數據並保持同步

Question

獲取我的收藏集后，服務器會向我發送last_name ， first_name和spouse_first_name （以及其他對該問題不重要的屬性）。

我希望能夠添加一個名為mailing_name的屬性，該屬性實質上是：

var setNameOnFormAttribute = this.get("last_name") + ", " + this.get("last_name");

if (!_.isNull(this.get("spouse_first_name")) || !_.isEmpty(this.get("spouse_first_name"))) {
setNameOnFormAttribute += " & " + this.get("spouse_first_name");
}

我想確保如果由於任何原因更改了任何基本屬性（ last_name ， first_name和spouse_first_name ），則自定義mailing_name屬性將得到更新，並且所有使用mailing_name屬性的視圖都將被更新。

如果這有所作為，我正在使用bone.marionette。

編輯1

我的第一次嘗試：

define([
    'backbone'
],
function( Backbone ) {
    'use strict';

    /* Return a model class definition */
    return Backbone.Model.extend({
        initialize: function (){
            console.log(this.attributes);

            this.bind("change:last_name", this.setNameOnFormAttribute);
            this.bind("change:first_name", this.setNameOnFormAttribute);
            this.bind("change:spouse_first_name", this.setNameOnFormAttribute);
        },

        setNameOnFormAttribute: function(){
            var name_on_form = this.get("last_name") + ", " + this.get("first_name");

            if (!_.isNull(this.get("spouse_first_name")) || !_.isEmpty(this.get("spouse_first_name"))) {
                name_on_form += " & " + this.get("spouse_first_name");
            }

            this.set("name_on_form", name_on_form);
        }
    });
});

如果ind奇怪，則初始化函數開始處的console.log將顯示所有屬性都已設置。 因此，屬性上的change事件不會觸發，因此我無法注入新屬性。

我在這里可能采取了錯誤的方法...

編輯2回答貝爾納多的問題

它與木偶視圖相連。 從一個組合視圖中獲取該集合，該集合只是定義了適當的模型。

define([
    'backbone',
    'collections/tasks',
    'views/item/task',
    'views/item/tasklist_empty',
    'hbs!tmpl/layout/tasklist_tmpl'
],
function( Backbone, TasksCollection, TaskView, tasklistEmptyView, TasklistTmpl  ) {
    'use strict';

    return Backbone.Marionette.CompositeView.extend({

        initialize: function() {
            this.collection = new TasksCollection();
            this.collection.bind("reset", _.bind(this.render, this));
            this.collection.fetch({ reset: true });
        },

        itemView: TaskView,
        emptyView: tasklistEmptyView,

        template: TasklistTmpl,

        itemViewContainer: ".tasks"

    });

});


define([
    'backbone',
    'moment',
    'application',
    'models/task'
],
function( Backbone, moment, App, Task ) {
    'use strict';

    /* Return a collection class definition */
    return Backbone.Collection.extend({
        initialize: function() {
        },

        comparator: function(model) {
            return moment(model.get('received_date')).unix();
        },

        model: Task,

        url: App.apiUrl + '/tasks'

    });
});

Answer 1

已編輯

我看到您確實在使用fetch ，但是使用的是reset選項。 如果您查看被調用的add函數的帶主干的帶注釋的代碼，則它基本上會向下游發送的選項添加silent: true 。 然后將其發送到_preparemodel函數，並使您集合中的所有子模型都使用silent: true創建，因此，您看到的是屬性集，而從未看到更改事件觸發。 在使用“重置” fetch選項之后，您需要在模型上手動引發該事件。

按照目前的情況，我認為您只需要手動觸發該事件，並可能會在setmailtoname修正邏輯， setmailtoname ，您就只能使用!_isEmpty或將短路或更改為and了。 我不會在初始化中添加設置mail_to_name的調用，因為如果您將其更改為不設置而獲取等，它將觸發兩次。

這是一個新的jsfiddle，其中包含更改及其演示。 也是用於測試的同步重定向。

我基本上將此添加到您的收藏夾模型中。 也許有更好的方法，但是我只關注骨干幾天。

initialize: function () {
    this.bind("reset", function () {
        _.each(this.models, function (model) {
            model.setNameOnFormAttribute.apply(model, arguments);
        });
    });

編輯結束：剩下的只是信息。

我假設此數據不是來自fetch或其他東西，因為您正在檢查initialize函數中的屬性？ 那不會在fetch執行，對嗎？

假設不是：

除非您在映射屬性后進行更改，否則事件不會觸發，因此我在initialize函數中調用了setNameOnForm 。 在提供的代碼中，我將options設置為{ silent: true }以便不發送“ change”觸發器，但是您可能要根據使用情況將其刪除。

假設已獲取

設置的功能可能錯誤嗎？ 您可以登錄那里查看它是否被調用以及是否返回正確的值？ 我認為該功能應該是以下之一。 您可能對||有問題 而不是&&

jsfiddle

我還添加了處理options參數的功能[直接調用或從調用傳遞給觀察到的集合[例如， aModel.set("last_name"); ]，然后通過Backbone.Model.trigger函數將其作為第三個參數發送給該方法。

我在jsfiddle上添加了一些小巧的日志記錄。 對不起，我不知道如何使用木偶。 我還沒有通過功能更改來更新它。

Answer 2

如果您在這里查看骨干網來源：

http://documentcloud.github.io/backbone/docs/backbone.html#section-28

您可以看到在調用initialize之前，已在Backbone.Model構造函數中設置了模型屬性。

但是，這與在您的情況下不觸發change事件無關：您從數據庫中獲取模型的數據后，您的change事件應觸發，並且綁定應觸發Composite屬性的設置。

到目前為止，您的代碼看起來不錯-您如何初始化模型，視圖和獲取數據？