ব্যাকবোন.জেএস-এ উপ-দর্শনগুলি কীভাবে রেন্ডার এবং সংযোজন করা যায়

Question

আমার একটি নেস্টেড-ভিউ সেটআপ রয়েছে যা আমার অ্যাপ্লিকেশনটিতে কিছুটা গভীর হতে পারে। আমি উপ-মতামত শুরু করার, রেন্ডারিং এবং সংযোজন সম্পর্কে ভাবতে পারি এমন অনেকগুলি উপায় রয়েছে তবে আমি ভাবছি যে সাধারণ অভ্যাসটি কী।

আমি এমন এক দম্পতি যা আমি ভেবেছিলাম:

initialize : function () {

    this.subView1 = new Subview({options});
    this.subView2 = new Subview({options});
},

render : function () {

    this.$el.html(this.template());

    this.subView1.setElement('.some-el').render();
    this.subView2.setElement('.some-el').render();
}

পেশাদাররা: অ্যাডেন্ডিংয়ের সাথে আপনাকে সঠিক ডিওএম অর্ডার বজায় রাখার বিষয়ে চিন্তা করতে হবে না। ভিউগুলি প্রথম দিকে আরম্ভ করা হয়, সুতরাং রেন্ডার ফাংশনে একবারে সমস্ত কিছু করার মতো কিছুই নেই।

কনস: আপনাকে বাধ্য করা হচ্ছে পুনঃপ্রেরণাপত্রের বিজ্ঞাপনগুলি (), যা ব্যয়বহুল হতে পারে? প্যারেন্ট ভিউয়ের রেন্ডার ফাংশনটি হ'ল সাবউভিউ রেন্ডারিংয়ের সাথে বিশৃঙ্খলাযুক্ত যে ঘটতে হবে? tagNameআপনার উপাদানগুলির সেট করার ক্ষমতা নেই , সুতরাং টেমপ্লেটের সঠিক ট্যাগনামগুলি বজায় রাখা দরকার।

অন্য উপায়:

initialize : function () {

},

render : function () {

    this.$el.empty();

    this.subView1 = new Subview({options});
    this.subView2 = new Subview({options});

    this.$el.append(this.subView1.render().el, this.subView2.render().el);
}

পেশাদাররা: আপনাকে ইভেন্টগুলি পুনঃ-ডেলিগেট করতে হবে না। আপনার এমন কোনও টেম্পলেট দরকার নেই যা খালি স্থানধারক ধারণ করে এবং আপনার ট্যাগনামটি ভিউ দ্বারা সংজ্ঞায়িত করতে ফিরে এসেছে।

কনস: আপনাকে এখন সঠিক ক্রমে জিনিসগুলি যুক্ত করতে হবে তা নিশ্চিত করতে হবে। প্যারেন্ট ভিউয়ের রেন্ডারটি সাবউভিউ রেন্ডারিং দ্বারা এখনও বিশৃঙ্খল।

একটি onRenderইভেন্ট সহ:

initialize : function () {
    this.on('render', this.onRender);
    this.subView1 = new Subview({options});
    this.subView2 = new Subview({options});
},

render : function () {

    this.$el.html(this.template);

    //other stuff

    return this.trigger('render');
},

onRender : function () {

    this.subView1.setElement('.some-el').render();
    this.subView2.setElement('.some-el').render();
}

পেশাদাররা: সাবউউ লজিকটি এখন দেখার থেকে আলাদা করা হয়েছেrender() পদ্ধতি ।

একটি onRenderইভেন্ট সহ:

initialize : function () {
    this.on('render', this.onRender);
},

render : function () {

    this.$el.html(this.template);

    //other stuff

    return this.trigger('render');
},

onRender : function () {
    this.subView1 = new Subview();
    this.subView2 = new Subview();
    this.subView1.setElement('.some-el').render();
    this.subView2.setElement('.some-el').render();
}

আমি এই সমস্ত উদাহরণ জুড়ে একধরণের মিশ্রিত করেছি এবং বিভিন্ন অনুশীলনের একটি গুচ্ছ মেলেছি (এর জন্য দুঃখিত) তবে আপনি কী রাখবেন বা যুক্ত করবেন সেগুলি কী? এবং আপনি কি করবেন না?

অনুশীলনের সংক্ষিপ্তসার:

• ভিতরে initializeবা ভিতরে সাবভিউ ইনস্টল করুনrender ?
• সমস্ত সাব-ভিউ রেন্ডারিং লজিক ইন renderবা ইন সম্পাদন করুনonRender ?
• ব্যবহার করবেন setElementনাকি append/appendTo?

Comments

মোছা না করেই নতুন সম্পর্কে আমি সাবধান থাকব, আপনি সেখানে স্মৃতি ফাঁস হয়ে গেলেন।

— ভিমডুড

চিন্তা করবেন না, আমার একটি closeপদ্ধতি আছে যা একটি onCloseশিশুকে পরিষ্কার করে দেয় তবে আমি কীভাবে তাত্ক্ষণিকভাবে তাদের প্রথম স্থানে রেন্ডার করব এবং কীভাবে রেন্ডার করব তা সম্পর্কে আমি আগ্রহী।

— ইয়ান স্টর্ম টেলর

@ আবদেলসাইদ: জাভাস্ক্রিপ্টে, জিসি মেমরির অবনতি পরিচালনা করে। deleteজেএসে deleteসি ++ এর সমান নয় । আপনি যদি আমাকে জিজ্ঞাসা করেন তবে এটি খুব খারাপ নামযুক্ত কীওয়ার্ড।

— মাইক বেইলি

@ মাইকবাংটিগুই এটি পেয়েছে তবে জেএসের মতো এটি জেএস ব্যতীত মুক্ত মেমরির জন্য আপনাকে কেবল নাল বরাদ্দ করতে হবে। আমি কী বলতে চাইছি তা স্পষ্ট করার জন্য এটি ভিতরে একটি নতুন অবজেক্ট সহ একটি লুপ তৈরি করে দেখুন এবং মেমরিটি নিরীক্ষণ করুন। অবশ্যই জিসি এতে পাবেন তবে আপনি স্মৃতিশক্তিটি পাওয়ার আগে এটি আলগা হয়ে যাবেন। এই ক্ষেত্রে রেন্ডার যা অনেকবার কল হতে পারে।

— ভিমডুড

আমি একজন শিক্ষানবিশ ব্যাকবোন বিকাশকারী। কেউ দয়া করে ব্যাখ্যা করতে পারেন কেন উদাহরণ 1 কেন আমাদের পুনরায় প্রতিনিধিদের অনুষ্ঠান করতে বাধ্য করে? (বা আমার নিজের প্রশ্নে এটি জিজ্ঞাসা করা উচিত?) ধন্যবাদ

— পিলাউ

Answer 1

আমি সাধারণত বেশ কয়েকটি ভিন্ন সমাধান দেখেছি / ব্যবহার করেছি:

সমাধান ঘ

var OuterView = Backbone.View.extend({
    initialize: function() {
        this.inner = new InnerView();
    },

    render: function() {
        this.$el.html(template); // or this.$el.empty() if you have no template
        this.$el.append(this.inner.$el);
        this.inner.render();
    }
});

var InnerView = Backbone.View.extend({
    render: function() {
        this.$el.html(template);
        this.delegateEvents();
    }
});

এটি কয়েকটি পরিবর্তন সহ আপনার প্রথম উদাহরণের সাথে সমান:

1. আপনি যে উপাদানটি সাব উপকরণগুলিকে সংযোজন করেন তা গুরুত্বপূর্ণ
2. বাইরের ভিউতে অভ্যন্তরীণ ভিউতে সেট করার জন্য এইচটিএমএল উপাদান থাকে না (যার অর্থ আপনি এখনও অভ্যন্তরীণ ভিউতে ট্যাগনাম নির্দিষ্ট করতে পারেন)
3. render()অভ্যন্তরীণ দৃশ্যের উপাদানটি ডিওএম-এ render()স্থাপনের পরে বলা হয়, যদি আপনার অভ্যন্তরীণ দৃশ্যের পদ্ধতিটি অন্য উপাদানগুলির অবস্থান / আকারের (যা আমার অভিজ্ঞতার ক্ষেত্রে সাধারণ ব্যবহারের ক্ষেত্রে হয়) এর উপর ভিত্তি করে পৃষ্ঠায় নিজেকে আকার দেওয়া / আকার দিচ্ছে তবে সহায়ক

সমাধান 2

var OuterView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },

    render: function() {
        this.$el.html(template); // or this.$el.empty() if you have no template
        this.inner = new InnerView();
        this.$el.append(this.inner.$el);
    }
});

var InnerView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },

    render: function() {
        this.$el.html(template);
    }
});

সমাধান 2 টি দেখতে আরও পরিষ্কার দেখাচ্ছে তবে এটি আমার অভিজ্ঞতাতে কিছু অদ্ভুত জিনিস সৃষ্টি করেছে এবং কার্যকারিতাটিকে নেতিবাচকভাবে প্রভাবিত করেছে।

আমি সাধারণত বেশ কয়েকটি কারণে সলিউশন 1 ব্যবহার করি:

1. আমার প্রচুর মতামত ইতিমধ্যে তাদের render()পদ্ধতিতে ডোমে থাকার উপর নির্ভর করে
2. যখন বাইরের দৃশ্যটি পুনরায় রেন্ডার করা হয়, তখন দর্শনগুলি পুনরায় আরম্ভ করা উচিত নয়, যা পুনরায় আরম্ভকরণের ফলে মেমরি ফাঁস হতে পারে এবং বিদ্যমান বাইন্ডিংগুলির সাথে অদ্ভুত সমস্যার কারণ হতে পারে

মনে রাখবেন যে আপনি যদি new View()প্রতিটি সময় শুরু করে render()ডাকা হয়, সেই সূচনাটি delegateEvents()যেভাবেই হোক কল করতে চলেছে । সুতরাং এটি প্রকাশ্যে যেমন "কন" হওয়া উচিত নয় "

Comments

এগুলির কোনও সমাধানই ভিউ.আরমোভকে উপ-ভিউ ট্রিটিংয়ের কাজ করে না, যা ভিউতে কাস্টম ক্লিনআপ করাতে জরুরী হতে পারে, যা অন্যথায় আবর্জনা সংগ্রহ রোধ করতে পারে

— ডমিনিক

Answer 2

এটি ব্যাকবোন নিয়ে বহুবর্ষজীবী সমস্যা এবং আমার অভিজ্ঞতায় এই প্রশ্নের সত্যিকারক সন্তোষজনক উত্তর নেই। আমি আপনার হতাশাগুলি ভাগ করছি, বিশেষত যেহেতু এই ব্যবহারের ক্ষেত্রে কতটা সাধারণ বিষয় সত্ত্বেও খুব কম গাইডেন্স রয়েছে। এটি বলেছিল, আমি সাধারণত আপনার দ্বিতীয় উদাহরণের মতো কিছু নিয়ে যাই।

প্রথমত, আমি এমন কোনও কিছু হাতছাড়া করব যা আপনার প্রয়োজন ইভেন্টগুলি পুনঃ-প্রতিনিধি করার জন্য। ব্যাকবোনটির ইভেন্ট-চালিত ভিউ মডেল এটির সবচেয়ে গুরুত্বপূর্ণ উপাদানগুলির মধ্যে একটি এবং এটির কার্যকারিতাটি হারাতে কেবল আপনার অ্যাপ্লিকেশন অ-তুচ্ছ কারণ কোনও প্রোগ্রামারের মুখে খারাপ স্বাদ ছাড়বে। স্ক্র্যাচ এক নম্বর।

আপনার তৃতীয় উদাহরণটি সম্পর্কে, আমি মনে করি এটি প্রচলিত রেন্ডারিং অনুশীলনের চারপাশে কেবল একটি শেষ রান এবং এর বেশি অর্থ যুক্ত হয় না। সম্ভবত যদি আপনি প্রকৃত ইভেন্টটি ট্রিগার করে (অর্থাত্ কোনও onRender"অনুমোদিত ইভেন্ট " নয় ), তবে এই ইভেন্টগুলিকে renderনিজের মধ্যে আবদ্ধ করার জন্য এটি মূল্যবান হবে । আপনি যদি renderঅযৌক্তিক এবং জটিল হয়ে উঠতে দেখেন তবে আপনার কাছে খুব কম সংক্ষিপ্তসার রয়েছে।

আপনার দ্বিতীয় উদাহরণে ফিরে যান, যা সম্ভবত তিনটি খারাপের চেয়ে কম। আমার পিডিএফ সংস্করণের ৪২ পৃষ্ঠায় পাওয়া রেসিপি উইথ ব্যাকবোন থেকে উদাহরণ কোড এখানে তুলে ধরা হয়েছে :

...
render: function() {
    $(this.el).html(this.template());
    this.addAll();
    return this;
},
  addAll: function() {
    this.collection.each(this.addOne);
},
  addOne: function(model) {
    view = new Views.Appointment({model: model});
    view.render();
    $(this.el).append(view.el);
    model.bind('remove', view.remove);
}

এটি আপনার দ্বিতীয় উদাহরণের চেয়ে সামান্যতর পরিশীলিত সেটআপ: এগুলি ফাংশনের একটি সেট নির্দিষ্ট করে addAllএবংaddOne এটি নোংরা কাজ করে। আমি মনে করি এই পদ্ধতির ব্যবহারযোগ্য (এবং আমি অবশ্যই এটি ব্যবহার করি); তবে এটি এখনও একটি উদ্ভট আফটারস্টেস্ট ছেড়ে যায়। (এই সমস্ত জিভ রূপককে ক্ষমা করুন)

সঠিক ক্রমে সংযোজন সম্পর্কিত আপনার বক্তব্য: আপনি যদি কঠোরভাবে সংযোজন করেন তবে নিশ্চিত, এটি একটি সীমাবদ্ধতা। তবে নিশ্চিত হয়ে নিন যে আপনি সমস্ত সম্ভাব্য টেম্প্লেটিং স্কিম বিবেচনা করছেন। সম্ভবত আপনি আসলে কোনও স্থানধারক উপাদান (উদাহরণস্বরূপ, একটি খালি divবা ul) পছন্দ করতে চান যা আপনি replaceWithউপযুক্ত নতুন মতামত ধারণ করে একটি নতুন (ডিওএম) উপাদান করতে পারেন। সংযোজন একমাত্র সমাধান নয়, আপনি যদি সে বিষয়ে খুব বেশি যত্নশীল হন তবে আপনি অবশ্যই অর্ডারিং সমস্যাটি ঘিরে ফেলতে পারেন, তবে আমি ধারণা করব যে এটি যদি আপনাকে ছড়িয়ে দিচ্ছে তবে আপনার কোনও ডিজাইনের সমস্যা রয়েছে। মনে রাখবেন, সাবভিউতে সাবভিউ থাকতে পারে এবং এটি যথাযথ হলে তা করা উচিত। এইভাবে, আপনার পরিবর্তে গাছের মতো কাঠামো রয়েছে, যা বেশ সুন্দর: প্রতিটি মতামত তার সমস্ত সাবভিউ যুক্ত করে, পিতামাতার ভিউতে আরও একটি যুক্ত করার আগে এবং আরও অনেক কিছু।

দুর্ভাগ্যক্রমে, সমাধান # 2 সম্ভবত-সেরা-ব্যাকব্যাকটি ব্যাকবোন ব্যবহারের জন্য আপনি সবচেয়ে ভাল আশা করতে পারেন। আপনি যদি তৃতীয় পক্ষের লাইব্রেরিগুলি পরীক্ষা করতে আগ্রহী হন তবে আমি যেটি দেখেছি (তবে এখনও এটির সাথে খেলার কোনও সময় হয়নি) সেটি হ'ল ব্যাকবোন ay লেআউটম্যানেজার, যা মনে হয় সাব-ভিউ যুক্ত করার একটি স্বাস্থ্যকর পদ্ধতি have যাইহোক, এমনকি এগুলির সাথে একই ধরনের বিষয়ে তাদের সাম্প্রতিক বিতর্ক হয়েছে।

Comments

পেনাল্টিমেট লাইন - model.bind('remove', view.remove);- আপনি কেবল তাদের আলাদা রাখার জন্য অ্যাপয়েন্টমেন্টের আরম্ভের ফাংশনটি করবেন না?

— ই

তখন যখন পিতামাতারা একটি রাজ্য রাখার কারণে যখন ভিউটি প্রতিবার তাত্ক্ষণিকভাবে পুনরায় ইনস্ট্যান্ট করা যায় না তখন কী হবে?

— মোর

এই সমস্ত উন্মত্ততা বন্ধ করুন এবং কেবল ব্যাকবোন.সুবিউজ প্লাগইন ব্যবহার করুন !

— সাহসী ডেভ

Answer 3

অবাক হওয়ার বিষয়টি এখনও উল্লেখ করা হয়নি, তবে আমি মেরিওনেট ব্যবহার করে গুরুত্ব সহকারে বিবেচনা করব ।

এটা তোলে দাঁড়া অ্যাপ্লিকেশানে একটি বিট আরো গঠন জোরদার হয়, নির্দিষ্ট দৃশ্য ধরনের (তত্সহ ListView, ItemView, Regionএবং Layout), সঠিক যোগ Controllers এবং আরো অনেক।

আপনাকে শুরু করতে গিথুবের প্রকল্প এবং ব্যাকবোন ফান্ডামেন্টাল বইয়ে অ্যাডি ওসমানীর একটি দুর্দান্ত গাইড এখানে রয়েছে ।

Comments

এটি প্রশ্নের উত্তর দেয় না।

— সিসার বাউটিস্তা

@ সিজারবাউটিস্তা আমি এটি সম্পাদন করতে কীভাবে মেরিওনেট ব্যবহার করব সেদিকে যাচ্ছি না তবে মেরিওনেট প্রকৃতপক্ষে উপরের সমস্যার সমাধান করতে পারে

— ডানা উডম্যান

Answer 4

আমার কাছে যা আছে বলে আমি বিশ্বাস করি, এই সমস্যার একটি যথেষ্ট বিস্তৃত সমাধান। এটি কোনও সংগ্রহের মধ্যে একটি মডেলকে পরিবর্তনের অনুমতি দেয় এবং কেবলমাত্র তার ভিউ পুনরায় রেন্ডার করা হয় (পুরো সংগ্রহের চেয়ে বরং)। এটি নিকটবর্তী () পদ্ধতির মাধ্যমে জম্বি ভিউগুলি অপসারণকে পরিচালনা করে।

var SubView = Backbone.View.extend({
    // tagName: must be implemented
    // className: must be implemented
    // template: must be implemented

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

    render: function(options) {
        console.log("rendering subview for",this.model.get("name"));
        var defaultOptions = {};
        options = typeof options === "object" ? $.extend(true, defaultOptions, options) : defaultOptions;
        this.$el.html(this.template({model: this.model.toJSON(), options: options})).fadeIn("fast");
        return this;
    },

    close: function() {
        console.log("closing subview for",this.model.get("name"));
        this.model.off("change", this.render, this);
        this.model.off("close", this.close, this);
        this.remove();
    }
});
var ViewCollection = Backbone.View.extend({
    // el: must be implemented
    // subViewClass: must be implemented

    initialize: function() {
        var self = this;
        self.collection.on("add", self.addSubView, self);
        self.collection.on("remove", self.removeSubView, self);
        self.collection.on("reset", self.reset, self);
        self.collection.on("closeAll", self.closeAll, self);
        self.collection.reset = function(models, options) {
            self.closeAll();
            Backbone.Collection.prototype.reset.call(this, models, options);
        };
        self.reset();
    },

    reset: function() {
        this.$el.empty();
        this.render();
    },

    render: function() {
        console.log("rendering viewcollection for",this.collection.models);
        var self = this;
        self.collection.each(function(model) {
            self.addSubView(model);
        });
        return self;
    },

    addSubView: function(model) {
        var sv = new this.subViewClass({model: model});
        this.$el.append(sv.render().el);
    },

    removeSubView: function(model) {
        model.trigger("close");
    },

    closeAll: function() {
        this.collection.each(function(model) {
            model.trigger("close");
        });
    }
});

ব্যবহার:

var PartView = SubView.extend({
    tagName: "tr",
    className: "part",
    template: _.template($("#part-row-template").html())
});

var PartListView = ViewCollection.extend({
    el: $("table#parts"),
    subViewClass: PartView
});

Answer 5

সাবউভিউগুলি তৈরি এবং রেন্ডার করার জন্য এই মিশ্রণটি দেখুন:

https://github.com/rotundasoftware/backbone.subviews

এটি একটি ন্যূনতম সমাধান যা এই থ্রেডে আলোচিত অনেকগুলি বিষয়কে সম্বোধন করে, যার মধ্যে রেন্ডারিং অর্ডার, পুনরায় প্রতিনিধি অনুষ্ঠান না করা ইত্যাদি Note উল্লেখ করুন যে সংগ্রহ দর্শনটির ক্ষেত্রে (যেখানে সংগ্রহের প্রতিটি মডেলই একটিতে প্রতিনিধিত্ব করে সাবভিউ) একটি আলাদা বিষয়। সেই ক্ষেত্রে আমি যে সাধারণ সমাধানটি সম্পর্কে অবগত রয়েছি তা হ'ল মেরিওনেটে কালেক্টভিউ ।

Answer 6

আমি উপরের সমাধানগুলি সত্যিই পছন্দ করি না। আমি রেন্ডার পদ্ধতিতে ম্যানুয়ালি কাজ করতে প্রতিটি দৃশ্যের চেয়ে এই কনফিগারেশনটির জন্য পছন্দ করি।

• views দর্শনের সংজ্ঞাগুলির কোনও বস্তু ফিরিয়ে ফাংশন বা বস্তু হতে পারে
• যখন কোন পিতামাতাকে .removeডাকা হয় তখন.remove হয় তখন নীচের অর্ডার আপ থেকে নেস্টেড বাচ্চাদের ডাকতে হবে (উপ-সাব-সাব ভিউ থেকে সমস্ত উপায়)
• ডিফল্টরূপে প্যারেন্ট ভিউ তার নিজস্ব মডেল এবং সংগ্রহটি পাস করে তবে বিকল্পগুলি যুক্ত এবং ওভাররাইড করা যায়।

এখানে একটি উদাহরণ:

views: {
    '.js-toolbar-left': CancelBtnView, // shorthand
    '.js-toolbar-right': {
        view: DoneBtnView,
        append: true
    },
    '.js-notification': {
        view: Notification.View,
        options: function() { // Options passed when instantiating
            return {
                message: this.state.get('notificationMessage'),
                state: 'information'
            };
        }
    }
}

Answer 7

ব্যাকবোনটি ইচ্ছাকৃতভাবে তৈরি করা হয়েছিল যাতে এটি এবং অন্যান্য অনেক বিষয়ে কোনও "সাধারণ" অনুশীলন না ঘটে। এটি যতটা সম্ভব অপরিবর্তিত হতে বোঝানো হয়েছে। তাত্ত্বিকভাবে, আপনি এমনকি ব্যাকবোন সঙ্গে টেমপ্লেট ব্যবহার করতে হবে না। renderভিউয়ের সমস্ত ডেটা ম্যানুয়ালি পরিবর্তনের জন্য আপনি কোনও ভিউয়ের ফাংশনে জাভাস্ক্রিপ্ট / জ্যাকুয়ারি ব্যবহার করতে পারেন । এটিকে আরও চরম করতে আপনার এমনকি একটি নির্দিষ্ট renderফাংশন প্রয়োজন নেই। আপনার একটি ফাংশন বলা যেতে পারে renderFirstNameযা ডোম এবং এর প্রথম নামটি আপডেট করেrenderLastName আপডেট করে শেষ নামটি আপডেট করে। আপনি যদি এই পদ্ধতির অবলম্বন করেন তবে পারফরম্যান্সের দিক থেকে এটি আরও ভাল হবে এবং আপনাকে আর কখনও ম্যানুয়ালি ইভেন্টগুলি ডেলিগেট করতে হবে না। কোডটি পড়ার জন্য কারও কাছে মোটামুটি বোঝা যাবে (যদিও এটি দীর্ঘ / বার্তাবহ কোড হবে)।

তবে, সাধারণত টেমপ্লেটগুলি ব্যবহার করে এবং পুরো ভিউটি ধ্বংস করে এবং পুনর্নির্মাণের কোনও কুফল হয় না এবং এটি প্রতিটি প্রতিবেদনের কলকেই পর্যালোচনা করে, কারণ এটি অন্যথায় অন্যথায় কিছু করার জন্য এমনকি প্রশ্নকর্তাকেও আসেনি। সুতরাং বেশিরভাগ লোকেরা প্রতিটি পরিস্থিতি জুড়েই বেশিরভাগ ক্ষেত্রে এটি করেন। এবং এজন্যই মতামতযুক্ত ফ্রেমওয়ার্কগুলি এটিকে ডিফল্ট আচরণ করে।

Answer 8

আপনি ভেরিয়েবল হিসাবে মূল টেমপ্লেটে রেন্ডার করা সাবভিউগুলি ভেরিয়েবল হিসাবে ইনজেক্ট করতে পারেন।

প্রথমে সাবউভিউগুলি রেন্ডার করুন এবং এটিকে এইচটিএমএলে রূপান্তর করুন:

var subview1 = $(subview1.render.el).html(); var subview2 = $(subview2.render.el).html();

(এই পদ্ধতিতে আপনি subview1 + subview2লুপগুলিতে ব্যবহার করার মতো মতামতকেও গতিশীলভাবে স্ট্রিং করতে পারতেন ) এবং তারপরে এটি মাস্টার টেমপ্লেটে এমনটি প্রেরণ করুন যা দেখতে দেখতে: ... some header stuff ... <%= sub1 %> <%= sub2 %> ... some footer stuff ...

এবং অবশেষে এটির মতো ইনজেক্ট করুন:

this.$el.html(_.template(MasterTemplate, { sub1: subview1, sub2: subview2 } ));

সংক্ষিপ্তসারগুলির মধ্যে ইভেন্টগুলি সম্পর্কিত: এগুলি সম্ভবত প্যারেন্টে (মাস্টারভিউ) সংযুক্ত থাকতে হবে সংক্ষিপ্তসারগুলির মধ্যে নয় approach

Answer 9

আমি নিম্নলিখিত পদ্ধতিটি ব্যবহার করতে চাই যা শিশুদের দৃষ্টিভঙ্গি সঠিকভাবে সরানো নিশ্চিত করে। এখানে থেকে একটি উদাহরণ অ্যাডি ওসমানীর বইয়ের ।

Backbone.View.prototype.close = function() {
    if (this.onClose) {
        this.onClose();
    }
    this.remove(); };

NewView = Backbone.View.extend({
    initialize: function() {
       this.childViews = [];
    },
    renderChildren: function(item) {
        var itemView = new NewChildView({ model: item });
        $(this.el).prepend(itemView.render());
        this.childViews.push(itemView);
    },
    onClose: function() {
      _(this.childViews).each(function(view) {
        view.close();
      });
    } });

NewChildView = Backbone.View.extend({
    tagName: 'li',
    render: function() {
    } });

Answer 10

ব্যয়বহুল হওয়ায় ইভেন্টগুলি পুনঃ-প্রতিনিধি করার দরকার নেই is নিচে দেখ:

    var OuterView = Backbone.View.extend({
    initialize: function() {
        this.inner = new InnerView();
    },

    render: function() {
        // first detach subviews            
        this.inner.$el.detach(); 

        // now can set html without affecting subview element's events
        this.$el.html(template);

        // now render and attach subview OR can even replace placeholder 
        // elements in template with the rendered subview element
        this.$el.append(this.inner.render().el);

    }
});

var InnerView = Backbone.View.extend({
    render: function() {
        this.$el.html(template);            
    }
});