0

我在主干中有一个问题,我想从后端渲染 100 行数据(通过 url 获取)并在按钮元素和分页之间显示。我创建了两个模板,并且有两个视图,一个用于整个页面,另一个用于单个项目。但是当我获取数据时,它们不会在按钮和分页 div 之间移动,所有 100 行都在它之下。我怎样才能把它们放在合适的地方?这些是我的模板:

列表模板:

<div class="message-list-actions">


      <div class="action">
        <select>
          <option value="0">Bulk Actions</option>
          <option value="1">Delete</option>
          <option value="2">Mark As Read</option>
        </select>
        <button class="grey">OK</button>
      </div>

      <div class="action">
        <select>
          <option value="0">All</option>
          <option value="1">Unread Messages</option>
          <option value="2">Read Messages</option>
        </select>
        <button class="grey">OK</button>
      </div>

      <div class="results right">
          <form>
            <label for="results">Results pr. page</label>
            <select name="results">
              <option value="25">25</option>
              <option value="50">50</option>
              <option value="100">100</option>
              <option value="500">500</option>
            </select>
          </form>
        </div>

    </div> <!-- message-list-actions -->
  <div class="message-list">

      <div class="message-list-header row">

        <div class="left check">
          <input type="checkbox" name="type"/>
          <label for="type">CHECK ALL</label>
        </div>

        <div class="left date" >
          <span class="sorter">Date</span>
        </div>

        <div class="large-9 columns" >
          <span class="sorter">Message</span>
        </div>

      </div>


 <section class="message-item row">
        <div class="message-list"></div>   
          <div class="left check" >
          <input type="checkbox" class="type">
        </div>
        <div class="left date" >

          <div class="icon"></div>

        </div>
        <div class="large-9 columns" >


        </div>
    </section>


<section>
      <ul class="pagination">
        <li class="arrow unavailable"><a href="">Previous</a></li>
        <li class="current"><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li class="unavailable"><a href="">&hellip;</a></li>
        <li><a href="">12</a></li>
        <li><a href="">13</a></li>
        <li class="arrow"><a href="">Next</a></li>
      </ul>
</section>

其他模板:

   <div class="message-list">


 <section class="message-item row">
        <div class="left check" >
          <input type="checkbox" class="type">
        </div>
        <div class="left date" >
          <p><%= created !== undefined ? created : "not available" %></p>
          <div class="icon"></div>
          <div class="severity normal"><%= name %></div>
        </div>
        <div class="large-9 columns" >
          <h4><a href="#messageDetailsView"><%= title %></a></h4>
          <p><%= id %></p>
        </div>
        <!-- <a href="#" class="delete">Delete</a> -->
     </section>
   </div> <!-- .main -->

//查看消息:

define([
    "jquery",
    "underscore",
    "backbone",
    "js/collections/messagesCollection", 
    "js/models/messagesModel", 
    "text!templates/messageView.html",
    "text!templates/messageList.html",
    "text!templates/messageDetails.html"
    ], function($, _ , Backbone,
        MessagesCollection,
        MessagesModel, 
         UserEditTemplate, UserViewTemplate, UserSelfEditTemplate, ResetPasswordTemplate, ChangePasswordTemplate){
        MessageViewTemplate, MessageListTemplate, MessageDetailsTemplate){

    var MessageView = Backbone.View.extend({

        tagName : "div",
        messageViewTemplate : _.template(MessageViewTemplate),

        messageDetailsTemplate : _.template(MessageDetailsTemplate),
        template : _.template(MessageDetailsTemplate),

        collection : MessagesCollection,

        initialize : function(){
            this.model.on("change", this.render, this);
            this.model.on("update", this.render, this);
        },

        render : function(){
            //this.$el.html(this.userTemplate(this.model.toJSON()));
            this.$el.html(this.messageViewTemplate(this.model.toJSON()));
            return this;

         }


    });
    return MessageView;
});     

查看消息列表:

define([
    "jquery",
    "underscore",
    "backbone",
    "js/models/loggedInUserModel",
    "js/models/currentTabModel",
    "js/models/messagesModel", 
    "js/collections/messagesCollection",
    "js/views/messageView", 
    "text!templates/messageList.html",
    "text!templates/messageDetails.html",
    "text!templates/header.html",
    "text!templates/breadcrumbs.html",
    "text!templates/footer.html"
    ], function($, _, Backbone,

        MessagesModel,
        MessagesCollection, 
        MessageView,
        MessageListTemplate, MessageDetailsTemplate, HeaderTemplate, BreadCrumbTemplate, FooterTemplate
        ){

        var MessagesView = Backbone.View.extend({
            el : $("#maincontent"),
            messageListTemplate : MessageListTemplate,
            messageDetailsTemplate : _.template(MessageDetailsTemplate),
            collection : MessagesCollection,


            initialize : function(){
                console.log("initialize messages");
                this.collection = new MessagesCollection();

                this.collection.on("add", this.renderMessage, this);
                this.collection.on("reset", this.render, this);
                this.collection.on("update", this.render, this);
                if(this.options.selfEdit === false || _.isUndefined(this.options.selfEdit)){
                    this.start();
                }
                else{
                    console.log("options", this.options);
                    this.currentUserModel.fetch();
                }

            },

            start : function(){
                this.collection.fetch();
                this.currentUserModel.fetch();

                this.renderFooter();

            },
            render : function(){

                this.$el.html(this.messageListTemplate);
                _.each(this.collection.models, function(item){
                    this.renderMessage(item);
                }, this);
            },

            renderMessage : function(item){
                var messageView = new MessageView({
                    model : item
                });
                this.$el.append(messageView.render().el);
            },

            renderMessageDetails : function(item){
                var messageView = new MessagesView({
                    model : item
                });
                this.$el.append(messageView.renderSelfView().el);
            }

        });
    return MessagesView;
    });

//模型

define([
    "jquery",
    "underscore",
    "backbone"
    ], function($, _ , Backbone){

        var MessagesModel = Backbone.Model.extend({
            defaults : {
                id : null,
                created : null,
                timestamp : null,
                severity : null

            },

            parse : function(response){
                response.id = response._id.$oid;
                response.created = response.created.$date;
                response.timestamp = response.timestamp.$date;
                response.severity = response.severity;

                return response;
            },

            clear : function(){
                this.destroy();
                this.view.remove();
            },



            // Convert regular JSON into MongoDB extended one.
            toExtendedJSON: function() {
                var attrs = this.attributes;
                attrs = _.omit(attrs, ["created", "timestamp"]);

                if (_.isUndefined(attrs.created))  {
                    // console.log("this", this["this.created"]);
                    attrs.created = { $date: this.get("created") };
                }

                if (_.isUndefined(attrs.timestamp))  {
                    attrs.timestamp = { $date: this.get("timestamp") };
                }
                console.dir(attrs);
                return attrs;
            },

            // Substute toJSON method when performing synchronization.
            sync : function(method, model, options) {
                /*
                * If we are performing an update we need to call the extendedJSON method
                * By calling this, we guarantee that we comply to the MongoDB model.
                * After applying that model, we then call Backbone .sync protoryp and then set the model.toJSON method
                * back to its original definition.
                */
                if(method === "update" && !model.isNew()){
                    var toJSON = this.toJSON;
                    this.toJSON = this.toExtendedJSON;
                    var ret = Backbone.sync.apply(this, arguments);
                    this.toJSON = toJSON;
                    return ret;
                }
                else{
                    return Backbone.sync.call(this, method, this, options);
                }
            },


            formatDate : function(dateString) {

                return new Date(dateString).toUTCString();

            }

        });
    return MessagesModel;
});

收藏

define([
    "jquery",
    "underscore",
    "backbone",
    "js/models/messagesModel"
    ],function($,_, Backbone, MessagesModel){


        var MessagesCollection = Backbone.Collection.extend({

            model : MessagesModel,
            url : "/api/v1/message",

            parse : function(response, xhr){
                return response.list;
            }
});
        return MessagesCollection;
    });
4

1 回答 1

0

为 renderMessage() 尝试以下操作:

       renderMessage : function(item){
            var messageView = new MessageView({
                model : item
            });
            this.$el.find('div.message-list').append(messageView.render().el);
        },

也以类似的方式更新 renderMessageDetails() 的代码。

于 2013-08-30T17:48:46.760 回答