簡體   English   中英

如何在 backbone.js 中保存一個集合或至少一部分

[英]How can I save a collection, or atleast a portion of it, in backbone.js

我需要維護 model 集合中模型的順序,並能夠將其保存到服務器。 我知道我可以保存單個模型,但是當我保存包含集合的“父模型”時,現在保存了包含集合的屬性。

有沒有辦法做到這一點? 下面是我的代碼。 我知道這可能不是最好的,我還在學習。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="json2.js"></script>
    <script type="text/javascript" src="underscore-min.js"></script>
    <script type="text/javascript" src="backbone-min.js"></script>
    <script type="text/javascript">
        $(function() {
            var WO = Backbone.Model.extend({
                wonum: null,
                part: null,
                desc: null,
                initialize: function()
                {
                    this.url = '/rest/wo/'+this.get('wonum');
                }
            });

            var WOView = Backbone.View.extend({
                tagName: "tr",
                className: "wo",
                initialize: function(options)
                {
                    this.render = _.bind(this.render, this);
                },
                render: function()
                {
                    $(this.el).html("<td>"+this.model.get('wonum')+"</td><td>"+this.model.get('part')+"</td><td>"+this.model.get('desc')+"</td>");
                    return this;
                }
            });


            var WOs = Backbone.Collection.extend({
                model: WO,
                url: '/rest/section/wos/'
            });

            var Section = Backbone.Model.extend({
                defaults: {
                    name : "Section"
                },
                wos: [],
                url: '/rest/section/',
                initialize: function()
                {
                    this.wos = new WOs();
                    this.wos.url += this.id;
                    this.url += this.id;
                }
            });

            var SectionView = Backbone.View.extend({
                tagName: "table",
                initialize: function()
                {
                    _(this).bindAll('add','remove');
                    var that = this;
                    this._woViews = [];

                    this.model.wos.each(this.add);

                    this.model.wos.bind('add', this.add);
                },
                add: function(woObj)
                {
                    var wov = new WOView({
                        model: woObj,
                        id: woObj.get('wonum')});
                    this._woViews.push(wov);
                    if(this._rendered)
                        $(this.el).append(wov.render().el);
                    this.model.save();
                },
                render: function()
                {
                    this._rendered = true;
                    var that = this;
                    $(this.el).empty();
                    $(this.el).append("<thead><th>WO</th><th>Part</th><th>Desc</th></thead>");
                    $(this.el).append("<tbody>");
                    _(this._woViews).each(function(wov)
                    {
                        $(that.el).append(wov.render().el);
                    });
                    $(this.el).append("</tbody>");
                    return this;
                }
            });

            var sec = new Section({id: 1});
            sec.wos.add({
                wonum: 1001,
                part: 'p1001',
                desc: 'd1001'});
            sec.wos.add({
                wonum: 1002,
                part: 'p1002',
                desc: 'd1002'});
            var secv = new SectionView({model: sec, id: sec.get('id')});
            $("body").append(secv.render().el);
            $("#addwo").bind("click",function()
            {
                secv.add(new WO({
                    wonum: 1005,
                    part: 'p1005',
                    desc: 'd1005'}));
            });
        });
    </script>
</head>
<body>
<button id='addwo'>Add WO</button>
</body>
</html>

我會考慮使用集合的比較器 function (您可以設置)來保留集合的順序。 該比較器可能會使用模型的屬性; 例如,模型的名稱,甚至是 position 屬性。

使用這種方法,您只需獨立保存每個 model,但集合可能會自行刷新(它將使用比較器來保留所需的順序)。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM