ইউআই উপাদানগুলির মধ্যে নকআউট জেএস পর্যবেক্ষণগুলি কীভাবে ভাগ করবেন

Question

আমি কীভাবে ইউআই উপাদানগুলির বৈশিষ্ট্যগুলি ব্যবহার করতে imports: {}এবংexports: {} ভাগ করতে পারি তা বুঝতে পারি :

defaults: {
    exports: {
        shouldShowMessage: '${$.component}'
    }
}

যা রফতানিতে উপাদানটির নাম দেয়।

তবে যখন আমি কোনও নকআউট পর্যবেক্ষণযোগ্য রফতানি করার চেষ্টা করি তখন তা সর্বদা সংজ্ঞায়িত হয়:

defaults: {
    exports: {
        shouldShowMessage: '${$.shouldShowMessage}'
    }
}

...

setupKoBindings: function() {
    this.shouldShowMessage = ko.observable('Testing');
}

কার্যতঃ হিসাবে আমি এখানে বর্ণিত স্টোরেজ মডেল তৈরি করতে যাচ্ছি তবে আমি আমদানি এবং রফতানিটি ব্যবহার করতে পছন্দ করব।

Answer 1

রফতানি সামগ্রীর মানগুলিকে উদাহরণস্বরূপ, একটি ':' দ্বারা পৃথক করা কোনও নাম এবং কোনও UiComp घटक উদাহরণের সম্পত্তিকে সমাধান করতে হবে checkout.cart.total:title।
রফতানি টার্গেটের নামটিতে ইউআই উপাদান "নেমস্পেস" অন্তর্ভুক্ত করতে হবে।

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

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

defaults: {
    exportTarget: "foo.bar",
    exportTargetProperty: "showMessage",

    tracks: {
        shouldShowMessage: true
    },

    exports: {
        shouldShowMessage: '${$.exportTarget}:${$.exportTargetProperty}'
    }
}
...

উপরেরটি প্রতিবার মান পরিবর্তন করে পুরো নাম সহ কোনও ইউআইকম্পোনেন্টের shouldShowMessageসম্পত্তিতে সম্পত্তিটির মানটি অনুলিপি করবে । মনে রাখবেন যে এটি স্বয়ংক্রিয়ভাবে লক্ষ্য সম্পত্তিটিও কেও পর্যবেক্ষণযোগ্য করে তুলবে না। এটি স্পষ্টভাবে ঘোষণা করতে হবে, যদি মান পরিবর্তনগুলি সেই সম্পত্তিটিতে অ্যাক্সেস করে এমন DOM নোডগুলি পুনরায় সরবরাহ করতে KO কে ট্রিগার করে।showMessagefoo.bar

যাইহোক, অবজেক্টে যুক্ত shouldShowMessageকরা tracksএটিকে স্বয়ংক্রিয়ভাবে কো-এস 5 পর্যবেক্ষণযোগ্য করে তুলবে। একটি আক্ষরিক ko.observable()কাজ ব্যবহার করে।

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

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

Comments

দুর্দান্ত ব্যাখ্যা, ধন্যবাদ @ বিনাই! আমি সময় পেলে এটি চেষ্টা করব এবং এটি কার্যকর হলে এটি গ্রহণযোগ্য হিসাবে চিহ্নিত করব।

— বেন ক্রুক

ব্যবহার করার সময় আমি কয়েকটি সমস্যার মধ্যে পড়েছি tracks, পর্যবেক্ষণযোগ্যগুলিতে ম্যানুয়ালি সাবস্ক্রাইব করা আর this.shouldShowMessage.subscribe is not a functionব্যবহার করার সময় আর কাজ করে না this.shouldShowMessage.subscribe(function() { ... }); এটি পর্যবেক্ষণযোগ্যদের অন্য কোনও উপায়ে সেট করার সময় এটি ঠিক কাজ করে । মনে হচ্ছে আমি কোনও পদক্ষেপ মিস করছি বা tracksএকইভাবে পর্যবেক্ষণযোগ্য তৈরি করি না।

— বেন ক্রুক

আপনি ঠিক বলেছেন, সম্পত্তিগুলি আর নিয়মিত কো পর্যবেক্ষণযোগ্য নয়, কেবল ইএস 5 গেটর / সেটার জোড়া। আপনি যদি মূল পর্যবেক্ষণযোগ্য ফাংশনটি অ্যাক্সেস করতে চান তবে আপনি কো এবং ইনজেকশন করতে পারবেন ko.getObservable(this, 'shouldShowMessage').subscribe(function(newValue) { ...});(প্রথম যুক্তিটি ভিউমডেল ( this), দ্বিতীয়টি ট্র্যাক করা সম্পত্তির নাম More আরও তথ্য এখানে: github.com/SteveSanderson/knockout-es5

— Vinai

আহ এটি বোঝায় যে, আপনি সেরা <3

— বেন ক্রুক

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

— বেন ক্রুক