javascript - 从输入将数据添加到模型

Question

我想知道如何根据我的输入将数据添加到模式。这是我的代码:

主文件

var Bintime = new Marionette.Application();

Bintime.on("before:start", function(){
    var RegionContainer = Marionette.LayoutView.extend({
        el: "#app",
        regions: {
            contacts: "#contacts",
            name: "#name",
            messages: "#messages",
            input: "#input"
        }
    });

    Bintime.regions = new RegionContainer();
});

Bintime.on("start", function(){
    Bintime.Contacts.List.Controller.listContacts();
});

<小时/>

型号

Bintime.module("Contacts", function(Contacts, Bintime, Backbone, Marionette, $, _){
    Contacts.Contacts = Backbone.Model.extend({});

    Contacts.ContactsCollection = Backbone.Collection.extend({
        model: Contacts.Contacts,
        comparator: "firstName"
    });

    var contacts;

    var initializeContacts = function(){
        contacts = new Contacts.ContactsCollection([
            {
                id: 1,
                firstName: "Alice",
                lastName: "Arten",
                messages: [
                    {
                        from: "1",
                        message: "Hello"
                    },
                    {
                        from: "1",
                        message: "How r u?"
                    },
                    {
                        to: "1",
                        message: "Hey!"
                    },
                    {
                        to: "1",
                        message: "Great!"
                    }
                ]
            },
            {
                id: 2,
                firstName: "Bob",
                lastName: "Brigham"
            },
            {
                id: 3,
                firstName: "Charlie",
                lastName: "Campbell"
            }
        ]);
    };

    var API = {
        getContactContact: function(){
            if(contacts === undefined){
                initializeContacts();
            }
            return contacts;
        }
    };

    Bintime.reqres.setHandler("contacts:contacts", function(){
        return API.getContactContact();
    });
});

<小时/>

主 Controller

Bintime.module("Contacts.List", function(List, Bintime, Backbone, Marionette, $, _) {
    List.Controller = {
        listContacts: function() {
            var contacts = Bintime.request("contacts:contacts");

            var contactsView = new List.Contacts({
                collection: contacts
            });

            contactsView.on("childview:contact:contacts", function(childView, model) {
                Bintime.Contact.Name.Controller.nameContact(model);
            });

            contactsView.on("childview:chat:contacts", function(childView, model) {
                Bintime.Contacts.Messages.Controller.chatMessages(model);
            });

            contactsView.on("childview:message:contacts", function(childView, model) {
                Bintime.Message.Input.Controller.messageField(model);
            });

            Bintime.regions.contacts.show(contactsView);
        }
    }
});

<小时/>

模块 Controller ，从输入添加消息

Bintime.module("Message.Input", function(Input, Bintime, Backbone, Marionette, $, _) {
    Input.Controller = {
        messageField: function(model){
            var contacts = new Input.Contacts({
                model: model
            });

            Bintime.regions.input.show(contacts);
        }
    }
});

<小时/>

查看模块，从输入添加消息

Bintime.module("Message.Input", function(Input, Bintime, Backbone, Marionette, $, _) {
    Input.Contacts = Marionette.ItemView.extend ({
        template: "#new",
        events: {
            "change input#message-input": "sendInput"
        },
        sendInput: function(e){
            e.preventDefault();
            var message = this.$("input#message-input").val();
            console.log(message);
        }
    });

    $('#new').append(v.el);
});

<小时/>

index.html

<div id="app" class="full-width full-height">
      <div class="full-width full-height">
        <div class="large-3 column contacts nopadding full-height">
          <div id="contacts">
          </div>
        </div>
        <div class="large-9 column full-height nopadding">
          <div id="name" class="user full-width">
            <div>

            </div>
          </div>
          <div id="messages">
          </div>
          <div id="input">
          </div>
        </div>
      </div>
    </div>
    <script type="text/template" id="contacts-list">
      <div class="contact">
        <div class="center text-center">
          <a href="#"><span class="text-center"><%= firstName%> <%= lastName%></span></a>
        </div>
      </div>
    </script>
    <script type="text/template" id="user">
        <h5 class="text-center"><%= firstName%> <%= lastName%></h5>
    </script>
    <script type="text/template" id="message">
      <% _.each(messages, function (item) { %>
        <div class="message">
          <div>
            <% if (item.from) { %>
              <div class="in">
                <%= item.message %>
              </div>
            <% } else if (item.to) { %>
              <div class="out">
                <%= item.message %>
              </div>
            <% } %>
          </div>
        </div>
      <% }); %>
    </script>
    <script type="text/template" id="new">
      <div class="enter full-width">
        <input id="message-input" type="text" placeholder="Enter your message..">
      </div>
      <a href="#" id="send" class="button">
        <span>Send</span>
      </a>
    </script>

如您所见，我已经从输入字段获取了数据:

sendInput: function(e){
   e.preventDefault();
   var message = this.$("input#message-input").val();
   console.log(message);
}

但我无法将数据添加到模型中。我尝试使用 .set() 执行此操作，但它覆盖了我的所有 messages 数组。类似的东西，但不完全相同:

sendInput: function(e){
    e.preventDefault();
    var field = $(e.currentTarget);
    var message = this.$("input#message-input").val();
    var data = {};
    data[field.attr("messages")] = message;
    this.model.set(data);
}

将“111”字符串添加到模型的结果，如上一个示例:

所以，基本上我需要向我的模型添加新消息。像这样:

    id: 1,
    firstName: "Alice",
    lastName: "Arten",
    messages: [
        {
            from: "1",
            message: "Hello"
        },
        {
            from: "1",
            message: "How r u?"
        },
        {
            to: "1",
            message: "Hey!"
        },
        {
            to: "1",
            message: "Great!"
        },
        {
            to: "1",
            message: "HERE SHOULD BE NEW MESSAGE"
        }
   ]

Answer 1

假设您可以通过 this.model 访问模型，其属性哈希如下所示:

{
   id: 1,
   firstName: "Alice",
   lastName: "Arten",
   messages: [{
        from: "1",
        message: "Hello"
      },
      {
        from: "1",
         message: "How r u?"
      },
      {
         to: "1",
         message: "Hey!"
      },
      {
         to: "1",
         message: "Great!"
      }]
}

如问题所示，您可以向其中添加一条新消息，如下所示:

this.model.get("messages").push({
    to: "1", // fill this as per your logic
    message: message 
});

这是可行的，因为对象在 JavaScript 中是通过引用传递的，而数组是特殊的对象。