এম্বারজেএস / এমবার ডেটাতে একক রুট সহ একাধিক মডেল কীভাবে ব্যবহার করবেন?

Question 1

দস্তাবেজগুলি পড়া থেকে, দেখে মনে হচ্ছে আপনাকে (বা হওয়া উচিত) এর মতো রুটে কোনও মডেল নির্ধারণ করতে হবে:

App.PostRoute = Ember.Route.extend({
    model: function() {
        return App.Post.find();
    }
});

আমার যদি কোনও নির্দিষ্ট রুটে বেশ কয়েকটি অবজেক্ট ব্যবহার করার দরকার হয় তবে কী হবে? অর্থাত্ পোস্ট, মন্তব্য এবং ব্যবহারকারীরা? সেগুলি লোড করার জন্য আমি কীভাবে রুটকে বলব?

Question 2

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

আপডেট: আমার মূল উত্তরে আমি বলেছিলাম embedded: trueমডেল সংজ্ঞাতে। এটা ভুল। রিভিশন 12-এ, অ্যাম্বার-ডেটা বিদেশী কীগুলি একক রেকর্ডের জন্য বা সংগ্রহের জন্য প্রত্যয় ( লিঙ্ক ) দিয়ে সংজ্ঞায়িত হওয়ার প্রত্যাশা করে । নিম্নলিখিত কিছু অনুরূপ:_id_ids

{
    id: 1,
    title: 'string',
    body: 'string string string string...',
    author_id: 1,
    comment_ids: [1, 2, 3, 6],
    tag_ids: [3,4]
}

আমি ফিজলটি আপডেট করেছি এবং যদি কিছু পরিবর্তন হয় বা আমি যদি এই উত্তরে প্রদত্ত কোডটি নিয়ে আরও সমস্যা খুঁজে পাই তবে তা আবার করব।

সম্পর্কিত মডেলগুলির সাথে উত্তর:

দৃশ্যকল্প আপনি বর্ণনা জন্য, আমি উপর নির্ভর করবে সমিতির মডেলের মধ্যে ~~(সেটিং embedded: true)~~ এবং শুধুমাত্র লোড Postযে রুট মডেল, আমি একটি বর্ণনা করতে পারেন বিবেচনায় DS.hasManyজন্য সমিতি Commentমডেল এবং DS.belongsToঅ্যাসোসিয়েশন ফর Userউভয় Commentএবং Postমডেল। এটার মতো কিছু:

App.User = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    email: DS.attr('string'),
    posts: DS.hasMany('App.Post'),
    comments: DS.hasMany('App.Comment')
});

App.Post = DS.Model.extend({
    title: DS.attr('string'),
    body: DS.attr('string'),
    author: DS.belongsTo('App.User'),
    comments: DS.hasMany('App.Comment')
});

App.Comment = DS.Model.extend({
    body: DS.attr('string'),
    post: DS.belongsTo('App.Post'),
    author: DS.belongsTo('App.User')
});

এই সংজ্ঞাটি নিম্নলিখিতগুলির মতো কিছু তৈরি করবে:

মডেলদের মধ্যে সমিতি

এই সংজ্ঞাটির সাথে, যখনই আমি findএকটি পোস্ট করি, আমার কাছে সেই পোস্টের সাথে সম্পর্কিত মন্তব্যগুলির সংকলনে এবং মন্তব্যের লেখক এবং ব্যবহারকারী যে পোস্টটির লেখক, ~~সেগুলি সমস্ত এম্বেড থাকা অবস্থায়~~ অ্যাক্সেস পেতে পারে । রুটটি সহজ থাকে:

App.PostsPostRoute = Em.Route.extend({
    model: function(params) {
        return App.Post.find(params.post_id);
    }
});

সুতরাং PostRoute(বা PostsPostRouteআপনি যদি ব্যবহার করছেন resource) তে আমার টেমপ্লেটগুলির নিয়ন্ত্রণকারীর অ্যাক্সেস থাকবে contentযা একটি Postমডেল, সুতরাং আমি লেখককে কেবল উল্লেখ করতে পারিauthor

<script type="text/x-handlebars" data-template-name="posts/post">
    <h3>{{title}}</h3>
    <div>by {{author.fullName}}</div><hr />
    <div>
        {{body}}
    </div>
    {{partial comments}}
</script>

<script type="text/x-handlebars" data-template-name="_comments">
    <h5>Comments</h5>
    {{#each content.comments}}
    <hr />
    <span>
        {{this.body}}<br />
        <small>by {{this.author.fullName}}</small>
    </span>
    {{/each}}
</script>

( বেড়া দেখুন )

অ-সম্পর্কিত মডেলগুলির সাথে উত্তর:

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

App.PostsPostRoute = Em.Route.extend({
    model: function(params) {
        return App.Post.find(params.post_id);
    },
    // in this sample, "model" is an instance of "Post"
    // coming from the model hook above
    setupController: function(controller, model) {
        controller.set('content', model);
        // the "user_id" parameter can come from a global variable for example
        // or you can implement in another way. This is generally where you
        // setup your controller properties and models, or even other models
        // that can be used in your route's template
        controller.set('user', App.User.find(window.user_id));
    }
});

এবং এখন যখন আমি পোস্টের রুটে আছি, আমার টেমপ্লেটগুলি userকন্ট্রোলারে থাকা সম্পত্তিটিতে এটি setupControllerহুক সেট আপ হওয়ার সাথে সাথে অ্যাক্সেস পাবে :

<script type="text/x-handlebars" data-template-name="posts/post">
    <h3>{{title}}</h3>
    <div>by {{controller.user.fullName}}</div><hr />
    <div>
        {{body}}
    </div>
    {{partial comments}}
</script>

<script type="text/x-handlebars" data-template-name="_comments">
    <h5>Comments</h5>
    {{#each content.comments}}
    <hr />
    <span>
        {{this.body}}<br />
        <small>by {{this.author.fullName}}</small>
    </span>
    {{/each}}
</script>

( বেড়া দেখুন )

Question 3

Em.Objectএকাধিক মডেলকে encapsulate করতে ব্যবহার করা modelহুকের সমস্ত ডেটা পাওয়ার ভাল উপায় । তবে ভিউ রেন্ডারিংয়ের পরে সমস্ত ডেটা প্রস্তুত হয়েছে তা নিশ্চিত করতে পারে না।

আরেকটি পছন্দ ব্যবহার করা হয় Em.RSVP.hash। এটি বেশ কয়েকটি প্রতিশ্রুতি একত্রিত করে এবং একটি নতুন প্রতিশ্রুতি ফিরিয়ে দেয়। সব প্রতিশ্রুতি নিরসনের পরে সমাধান হলে নতুন প্রতিশ্রুতি। আর setupControllerবলা হয় না যতক্ষণ না প্রতিশ্রুতি সমাধান বা বাতিল করা হয়।

App.PostRoute = Em.Route.extend({
  model: function(params) {
    return Em.RSVP.hash({
      post:     // promise to get post
      comments: // promise to get comments,
      user:     // promise to get user
    });
  },

  setupController: function(controller, model) {
    // You can use model.post to get post, etc
    // Since the model is a plain object you can just use setProperties
    controller.setProperties(model);
  }
});

এই উপায়ে রেন্ডারিংয়ের আগে আপনি সমস্ত মডেল পান। এবং ব্যবহারের Em.Objectএই সুবিধা নেই।

আরেকটি সুবিধা হ'ল আপনি প্রতিশ্রুতি এবং অ-প্রতিশ্রুতি একত্রিত করতে পারেন। এটার মত:

Em.RSVP.hash({
  post: // non-promise object
  user: // promise object
});

এ সম্পর্কে আরও জানতে এটি চেক করুন Em.RSVP: https://github.com/tildeio/rsvp.js

তবে আপনার রুটে গতিশীল বিভাগ থাকলে তা ব্যবহার Em.Objectবা Em.RSVPসমাধান করবেন না

মূল সমস্যা হ'ল link-to। আপনি যদি link-toমডেলগুলি দ্বারা উত্পাদিত ক্লিক লিঙ্কের মাধ্যমে url পরিবর্তন করেন তবে মডেলটি সরাসরি সেই পথে চলে যায়। এই ক্ষেত্রে modelহুক কল করা হয় না এবং setupControllerআপনি মডেল link-toআপনাকে দিতে পেতে ।

একটি উদাহরণ এরকম:

রুট কোড:

App.Router.map(function() {
  this.route('/post/:post_id');
});

App.PostRoute = Em.Route.extend({
  model: function(params) {
    return Em.RSVP.hash({
      post: App.Post.find(params.post_id),
      user: // use whatever to get user object
    });
  },

  setupController: function(controller, model) {
    // Guess what the model is in this case?
    console.log(model);
  }
});

এবং link-toকোড, পোস্টটি একটি মডেল:

{{#link-to "post" post}}Some post{{/link-to}}

বিষয়গুলি এখানে আকর্ষণীয় হয়ে ওঠে। আপনি /post/1পৃষ্ঠাটি দেখার জন্য ইউআরএল ব্যবহার করার সময়, modelহুকটি কল করা হয়, এবং setupControllerপ্রতিশ্রুতি সমাধানের পরে সরল বস্তুটি পায়।

তবে আপনি যদি ক্লিক link-toলিঙ্কে পৃষ্ঠাটি দেখে থাকেন তবে এটি postমডেলটি পাস PostRouteকরবে এবং রুটটি modelহুককে উপেক্ষা করবে । এই ক্ষেত্রে setupControllerপাবেন post, মডেল অবশ্যই আপনি ব্যবহারকারী না পেতে পারেন।

সুতরাং গতিশীল বিভাগগুলির সাথে আপনি সেগুলি রুটে ব্যবহার করছেন না তা নিশ্চিত করুন।

Question 4

কিছুক্ষণের জন্য আমি ব্যবহার করছি Em.RSVP.hash, তবে যে সমস্যাটি আমার মধ্যে এসেছিল তা হ'ল আমি চাই না যে সমস্ত মডেল রেন্ডারিংয়ের আগে লোড হওয়া পর্যন্ত আমার দৃষ্টিভঙ্গি অপেক্ষা করা উচিত। যাইহোক, আমি নভেলিজের লোকদের কাছে একটি দুর্দান্ত (তবে তুলনামূলকভাবে অজানা) সমাধান পেয়েছি যার মধ্যে আম্বার ব্যবহার করা জড়িত rom প্রাইমসপ্রক্সিমিক্সিন :

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

একটি রুট তৈরি করুন main-page.js:

import Ember from 'ember';

export default Ember.Route.extend({
    model: function() {
        return this.store.find('main-stuff');
    }
});

তারপরে আপনি একটি সম্পর্কিত হ্যান্ডলবারস টেম্পলেট তৈরি করতে পারেন main-page.hbs:

<h1>My awesome page!</h1>
<ul>
{{#each thing in model}}
    <li>{{thing.name}} is really cool.</li>
{{/each}}
</ul>
<section>
    <h1>Reasons I Love Cheese</h1>
</section>
<section>
    <h1>Reasons I Hate Cheese</h1>
</section>

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

<h1>My awesome page!</h1>
<ul>
{{#each thing in model}}
    <li>{{thing.name}} is really cool.</li>
{{/each}}
</ul>
<section>
    <h1>Reasons I Love Cheese</h1>
    {{render 'love-cheese'}}
</section>
<section>
    <h1>Reasons I Hate Cheese</h1>
    {{render 'hate-cheese'}}
</section>

এখন আপনাকে প্রত্যেকের জন্য নিয়ামক এবং টেম্পলেট তৈরি করতে হবে। যেহেতু তারা এই উদাহরণের জন্য কার্যকরভাবে অভিন্ন, আমি কেবল একটি ব্যবহার করব।

নামক একটি নিয়ামক তৈরি করুন love-cheese.js:

import Ember from 'ember';

export default Ember.ObjectController.extend(Ember.PromiseProxyMixin, {
    init: function() {
        this._super();
        var promise = this.store.find('love-cheese');
        if (promise) {
            return this.set('promise', promise);
        }
    }
});

আপনি লক্ষ্য করবেন যে আমরা এখানে ব্যবহার PromiseProxyMixinকরছি, যা নিয়ামককে প্রতিশ্রুতি-সচেতন করে তোলে। যখন নিয়ামকটি আরম্ভ করা হয়, আমরা নির্দেশ করি যে প্রতিশ্রুতিটি love-cheeseএম্বার ডেটার মাধ্যমে মডেলটি লোড করা উচিত । আপনার এই সম্পত্তিটি নিয়ামকের সম্পত্তিতে সেট করতে হবে promise।

এখন, একটি টেমপ্লেট তৈরি করুন love-cheese.hbs:

{{#if isPending}}
  <p>Loading...</p>
{{else}}
  {{#each item in promise._result }}
    <p>{{item.reason}}</p>
  {{/each}}
{{/if}}

আপনার টেমপ্লেটে, আপনি প্রতিশ্রুতির অবস্থার উপর নির্ভর করে বিভিন্ন সামগ্রী সরবরাহ করতে সক্ষম হবেন। আপনার পৃষ্ঠাটি প্রাথমিকভাবে লোড হয়ে গেলে আপনার "কারণগুলি আমি পছন্দ করি পনির" বিভাগটি প্রদর্শিত হবে Loading...। প্রতিশ্রুতিটি লোড হয়ে গেলে, এটি আপনার মডেলের প্রতিটি রেকর্ডের জন্য যুক্ত সমস্ত কারণ সরবরাহ করবে।

প্রতিটি বিভাগ স্বাধীনভাবে লোড হবে এবং অবিলম্বে রেন্ডারিং থেকে মূল বিষয়বস্তু অবরোধ করবে না।

এটি একটি সরল উদাহরণ, তবে আমি আশা করি অন্য সবাই এটির মতো দরকারী হিসাবে কাজ করেছে।

আপনি যদি অনেকগুলি সারি কন্টেন্টের জন্য অনুরূপ কিছু করতে চাইছেন তবে উপরে নভেলিজের উদাহরণটি আরও প্রাসঙ্গিক হতে পারে। যদি তা না হয় তবে উপরেরটি আপনার পক্ষে ভাল কাজ করা উচিত।

Question 5

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

App.PostRoute = Ember.Route.extend({
  model: function() {
    var multimodel = Ember.Object.create(
      {
        posts: App.Post.find(),
        comments: App.Comments.find(),
        whatever: App.WhatEver.find()
      });
    return multiModel;
  },
  setupController: function(controller, model) {
    // now you have here model.posts, model.comments, etc.
    // as promises, so you can do stuff like
    controller.set('contentA', model.posts);
    controller.set('contentB', model.comments);
    // or ...
    this.controllerFor('whatEver').set('content', model.whatever);
  }
});

আশা করি এটা সাহায্য করবে

Question 6

অন্যান্য সমস্ত দুর্দান্ত উত্তরের জন্য ধন্যবাদ, আমি একটি মিশ্রণ তৈরি করেছি যা এখানে সেরা সমাধানগুলিকে একটি সাধারণ এবং পুনরায় ব্যবহারযোগ্য ইন্টারফেসের সাথে একত্রিত করে। এটা তোলে executes একটি Ember.RSVP.hashমধ্যে afterModelমডেল আপনাকে তা নির্দিষ্ট জন্য, তারপর নিয়ামক মধ্যে বৈশিষ্ট্য উদ্বুদ্ধsetupController । এটি স্ট্যান্ডার্ড modelহুকের সাথে হস্তক্ষেপ করে না , তাই আপনি এখনও এটি স্বাভাবিক হিসাবে সংজ্ঞায়িত করবেন।

উদাহরণ ব্যবহার:

App.PostRoute = Ember.Route.extend(App.AdditionalRouteModelsMixin, {

  // define your model hook normally
  model: function(params) {
    return this.store.find('post', params.post_id);
  },

  // now define your other models as a hash of property names to inject onto the controller
  additionalModels: function() {
    return {
      users: this.store.find('user'), 
      comments: this.store.find('comment')
    }
  }
});

এখানে মিক্সিন:

App.AdditionalRouteModelsMixin = Ember.Mixin.create({

  // the main hook: override to return a hash of models to set on the controller
  additionalModels: function(model, transition, queryParams) {},

  // returns a promise that will resolve once all additional models have resolved
  initializeAdditionalModels: function(model, transition, queryParams) {
    var models, promise;
    models = this.additionalModels(model, transition, queryParams);
    if (models) {
      promise = Ember.RSVP.hash(models);
      this.set('_additionalModelsPromise', promise);
      return promise;
    }
  },

  // copies the resolved properties onto the controller
  setupControllerAdditionalModels: function(controller) {
    var modelsPromise;
    modelsPromise = this.get('_additionalModelsPromise');
    if (modelsPromise) {
      modelsPromise.then(function(hash) {
        controller.setProperties(hash);
      });
    }
  },

  // hook to resolve the additional models -- blocks until resolved
  afterModel: function(model, transition, queryParams) {
    return this.initializeAdditionalModels(model, transition, queryParams);
  },

  // hook to copy the models onto the controller
  setupController: function(controller, model) {
    this._super(controller, model);
    this.setupControllerAdditionalModels(controller);
  }
});

Question 7

https://stackoverflow.com/a/16466427/2637573 সম্পর্কিত মডেলগুলির জন্য ভাল। যাইহোক, অ্যাম্বার সিএমআই এবং অ্যাম্বার ডেটার সাম্প্রতিক সংস্করণ সহ, সম্পর্কহীন মডেলগুলির জন্য একটি সহজ পদ্ধতি রয়েছে:

import Ember from 'ember';
import DS from 'ember-data';

export default Ember.Route.extend({
  setupController: function(controller, model) {
    this._super(controller,model);
    var model2 = DS.PromiseArray.create({
      promise: this.store.find('model2')
    });
    model2.then(function() {
      controller.set('model2', model2)
    });
  }
});

আপনি শুধুমাত্র একটি বস্তু সম্পত্তি উদ্ধার করতে চান তাহলে model2, ব্যবহার DS.PromiseObject পরিবর্তে DS.PromiseArray :

import Ember from 'ember';
import DS from 'ember-data';

export default Ember.Route.extend({
  setupController: function(controller, model) {
    this._super(controller,model);
    var model2 = DS.PromiseObject.create({
      promise: this.store.find('model2')
    });
    model2.then(function() {
      controller.set('model2', model2.get('value'))
    });
  }
});

Question 8

মিল্কিওয়েজোর জবাব যোগ করা, ধন্যবাদ বিটিডব্লিউ:

this.store.find('post',1)

প্রত্যাবর্তন

{
    id: 1,
    title: 'string',
    body: 'string string string string...',
    author_id: 1,
    comment_ids: [1, 2, 3, 6],
    tag_ids: [3,4]
};

লেখক হবে

{
    id: 1,
    firstName: 'Joe',
    lastName: 'Way',
    email: 'MilkyWayJoe@example.com',
    points: 6181,
    post_ids: [1,2,3,...,n],
    comment_ids: [1,2,3,...,n],
}

মন্তব্য

{
    id:1,
    author_id:1,
    body:'some words and stuff...',
    post_id:1,
}

... আমি বিশ্বাস করি যে লিঙ্কটির ব্যাকগুলি গুরুত্বপূর্ণ যাতে পূর্ণ সম্পর্কটি প্রতিষ্ঠিত হয়। আশা করি যে কাউকে সাহায্য করবে।

Question 9

আপনি ডায়ামিক সেগমেন্টগুলি ব্যবহার করছেন বলে ডাকা না হলেও আপনি এটিকে সবসময় বলা হয় beforeModelবা afterModelহুকগুলি ব্যবহার করতে পারেন model।

অনুযায়ী অ্যাসিঙ্ক্রোনাস রাউটিং দস্তাবেজ:

মডেল হুক বিরাম-অন-প্রতিশ্রুতি রূপান্তরগুলির জন্য অনেকগুলি ব্যবহারের কেসগুলি কভার করে তবে কখনও কখনও আপনার আগে মডেল এবং আফটার মডেলের আগে সম্পর্কিত হুকগুলির সহায়তা প্রয়োজন। এর সর্বাধিক সাধারণ কারণ হ'ল আপনি যদি {-লিঙ্ক-টু}} বা ট্রানজিশনটো (কোনও ইউআরএল পরিবর্তনের ফলে সংক্রমণের বিপরীতে) এর মাধ্যমে গতিশীল ইউআরএল বিভাগের সাথে কোনও রুটে স্থানান্তরিত হন তবে আপনি যে রুটের মডেল you 'পুনরায় রূপান্তর ইতিমধ্যে নির্দিষ্ট করা হবে (উদাহরণস্বরূপ link link # লিঙ্ক-টু' নিবন্ধ "নিবন্ধ this} বা this.transitionTo ('নিবন্ধ', নিবন্ধ)), সেক্ষেত্রে মডেল হুক কল হবে না। এই ক্ষেত্রে, রাউটারটি এখনও কোনও রূপান্তর সম্পাদনের জন্য রুটের সমস্ত মডেল সংগ্রহ করতে থাকা অবস্থায় কোনও যুক্তি রাখতে আপনাকে আগের মডেল বা আফটার মডেল হুক ব্যবহার করতে হবে।

সুতরাং themesআপনার নিজের সম্পত্তি আছে বলুন SiteController, আপনার এর মতো কিছু থাকতে পারে:

themes: null,
afterModel: function(site, transition) {
  return this.store.find('themes').then(function(result) {
    this.set('themes', result.content);
  }.bind(this));
},
setupController: function(controller, model) {
  controller.set('model', model);
  controller.set('themes', this.get('themes'));
}