নকআউটজেএস টেমপ্লেটগুলিতে ডিবাগিংয়ের সমস্যায় আমি সমস্যা বজায় রাখি।
বলুন আমি " items" নামক কোনও সম্পত্তির সাথে আবদ্ধ হতে চাই তবে টেমপ্লেটে আমি একটি টাইপ তৈরি করে (অস্তিত্বহীন) সম্পত্তিটিকে আবদ্ধ করি " item"।
ক্রোম ডিবাগারটি কেবল আমাকে বলে:
"item" is not defined.
বাঁধাই সমস্যা সম্পর্কে আরও তথ্য পেতে আমাকে কী এমন সরঞ্জাম, কৌশল বা কোডিং শৈলী রয়েছে?
উত্তর:
একটি নির্দিষ্ট বিষয় যা আমি যখন প্রায়শই একটি নির্দিষ্ট সুযোগে ডেটা উপলভ্য হয় তা নিয়ে টেমপ্লেট / বিভাগটি এমন কিছুর সাথে প্রতিস্থাপন করা হয় তবে আমি প্রায়শই এটি করি:
<div data-bind="text: ko.toJSON($data)"></div>অথবা, আপনি যদি আরও কিছু পাঠযোগ্য সংস্করণ চান:
<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>এটি সেই সুযোগে আবদ্ধ হওয়া ডেটাটি ছিটকে দেবে এবং আপনাকে জিনিসগুলি যথাযথভাবে বাসা বাঁধছে কিনা তা নিশ্চিত করতে দেবে।
আপডেট: কেও ২.১ হিসাবে , আপনি এটিকে সহজ করতে পারেন:
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>এখন যুক্তিগুলি দেওয়া হয় JSON.stringify।
nameপর্যবেক্ষণযোগ্য হয়name.subscribe(function(newValue) { console.log("name", newValue); });
foreachদৃশ্যের মতো আমার উপাদানগুলির পাশের ডেটা দেখতে চাইলেও দেখতে পাই এবং কনসোলের মাধ্যমে চালনার চেয়ে প্রাসঙ্গিক রেন্ডারড মার্কআপের মধ্যে পৃষ্ঠাটিতে দেখতে আরও সহজ মনে করি। শুধু পরিস্থিতির উপর নির্ভর করে। আমার আরও কিছু ধারণা এখানে: knockmeout.net/2013/06/… । এছাড়াও, আপনি আপনার বাঁধাইয়ের মতো "ক্লিন" সংস্করণ লগ করতে চাইতে পারেন console.log(ko.toJS(valueAccessor())।
আপনি যদি ক্রোমকে উন্নয়নের জন্য ব্যবহার করেন তবে নকউটজস কনটেক্সট ডিবাগার নামে একটি সত্যই দুর্দান্ত এক্সটেনশন রয়েছে (যার সাথে আমি অনুমোদিত নয়) যা আপনাকে সরাসরি বিকাশকারী সরঞ্জামগুলির এলিমেন্টস প্যানেলে বাধ্যতামূলক প্রসঙ্গ দেখায়।
আপনার জাভাস্ক্রিপ্ট লাইব্রেরি ফাইলের কোথাও একবার একটি বাইন্ডিংহ্যান্ডলার সংজ্ঞা দিন ।
ko.bindingHandlers.debug =
{
init: function(element, valueAccessor)
{
console.log( 'Knockoutbinding:' );
console.log( element );
console.log( ko.toJS(valueAccessor()) );
}
};কেবল ব্যবহারের চেয়ে এটি পছন্দ করে:
<ul data-bind="debug: $data">সুবিধাদি
আমি আর একটি পেয়েছি যা সহায়ক হতে পারে। আমি কিছু বাইন্ডিং ডিবাগ করছিলাম এবং রায়ান উদাহরণ ব্যবহার করার চেষ্টা করছিলাম। আমি একটি ত্রুটি পেয়েছি যে জেএসওএন একটি বিজ্ঞপ্তি লুপ পেয়েছে।
<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
<li>
<pre data-bind="text: JSON.stringify(ko.toJS($parent), null, 2)"></pre>
<a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
</li>
</ul>তবে, এই পদ্ধতির ব্যবহার করে নিম্নলিখিতগুলির সাথে ডেটা-বাইন্ডের প্রতিস্থাপনের মানটি প্রতিস্থাপন করা হয়েছে:
<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
<li>
<pre data-bind="text: 'click me', click: function() {debugger}"></pre>
<a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
</li>
</ul>এখন আমি ক্রোম ডিবাগ উইন্ডোটি খোলা থাকার সময় যদি PRE উপাদানটিতে ক্লিক করি তবে আমি একটি সুন্দরভাবে ভরাট স্কোপ ভেরিয়েবল উইন্ডোটি পাই।
এটির জন্য একটু ভাল উপায় খুঁজে পেয়েছে:
<pre data-bind="text: ko.computed(function() { debugger; })"></pre>>=ক্রোম বিকাশকারী সরঞ্জামদণ্ডের নীচে-বামে আইকনটি ক্লিক করে বা Chrome বিকাশকারী সরঞ্জামদণ্ডে "কনসোল" ট্যাবটি খুলতে বা Ctrl+ Shift+ টিপে কনসোল অ্যাক্সেস করতে পারবেনJko.dataFor($0)ko.contextFor($0)
এই কৌশলটি ক্রোমের $ 0- $ 4 বৈশিষ্ট্য এবং নকআউটজেএসের ইউটিলিটি পদ্ধতির সংমিশ্রণ । সংক্ষেপে বলতে গেলে, ক্রোম স্মরণ যা উপাদান আপনি Chrome বিকাশকারী সরঞ্জাম দণ্ডের মধ্যে নির্বাচন করেছেন এবং ওরফে অধীনে এই উপাদান প্রকাশ $0, $1, $2, $3, $4। সুতরাং যখন আপনি আপনার ব্রাউজারে একটি উপাদান ডান ক্লিক করুন এবং নির্বাচন করুন 'পরিদর্শন উপাদান', এই উপাদান স্বয়ংক্রিয়ভাবেই আপনার ওরফে অধীনে উপলব্ধ $0। আপনি এই কৌশলটি নকআউটজেএস, অ্যাঙ্গুলারজেএস, জিকুয়ারি বা অন্য কোনও জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের সাহায্যে ব্যবহার করতে পারেন।
কৌতুকের অন্য দিকটি হ'ল নকআউটজেএস-এর ইউটিলিটি পদ্ধতিগুলি ko.dataFor এবং ko.context For:
ko.dataFor(element) - উপাদানটির বাইন্ডিংয়ের জন্য যে ডেটা পাওয়া যায় তা ফিরিয়ে দেয়ko.contextFor(element) - পুরো বাঁধাই প্রসঙ্গটি প্রদান করে যা ডম উপাদান হিসাবে উপলব্ধ ছিল।মনে রাখবেন, ক্রোমের জাভাস্ক্রিপ্ট কনসোল পুরোপুরি কার্যকরী জাভাস্ক্রিপ্ট রানটাইম পরিবেশ environment এর অর্থ হ'ল আপনি কেবল ভেরিয়েবলের সন্ধানে সীমাবদ্ধ নন। আপনি ko.contextForকনসোল থেকে সরাসরি ভিউ মডেলটির আউটপুট সঞ্চয় করতে এবং পরিচালনা করতে পারেন । চেষ্টা করুন var root = ko.contextFor($0).$root; root.addContact();এবং দেখুন :-)
শুভ ডিবাগিং!
আমি ব্যবহার করি এমন একটি সাধারণ জিনিস পরীক্ষা করে দেখুন :
function echo(whatever) { debugger; return whatever; }অথবা
function echo(whatever) { console.log(whatever); return whatever; }তারপরে এইচটিএমএলে, বলুন, আপনি ছিলেন:
<div data-bind="text: value"></div>কেবল এটির সাথে প্রতিস্থাপন করুন
<div data-bind="text: echo(value)"></div>আরো উন্নত:
function echo(vars, member) { console.log(vars); debugger; return vars[0][member]; }
<div data-bind="text: echo([$data, $root, $parents, $parentContext], 'value')"></div>উপভোগ করুন :)
হালনাগাদ
আরেকটি বিরক্তিকর বিষয় হ'ল আপনি যখন কোনও অপরিজ্ঞাত মানকে বাঁধতে চেষ্টা করছেন। উপরের উদাহরণে কল্পনা করুন যে ডেটা অবজেক্টটি কেবল {} মান নয়: 'কিছু পাঠ্য'}} এক্ষেত্রে আপনি সমস্যায় পড়বেন তবে নীচের টুইটের মাধ্যমে আপনি ভাল থাকবেন:
<div data-bind="text: $data['value']"></div> আমি এই ত্রুটিগুলি কল্পনা করতে সহায়তা করার জন্য নকথ্রুজ.জেস নামে একটি গিথুব প্রকল্প তৈরি করেছি।
https://github.com/JonKragh/knockthrough
এটি বাইন্ডিং ত্রুটিগুলি হাইলাইট করে এবং সেই নোডের উপর ডেটাাকন্টেক্সটের একটি ডাম্প দেয়।
আপনি এখানে একটি নমুনা নিয়ে খেলতে পারেন: http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm
আমাকে এই পর্যায়ে পৌঁছে দেওয়ার জন্য আরপি নিমিমায়ারকে তার দুর্দান্ত নকআউট কোড নমুনার জন্য ক্রেডিট।
কোন তথ্যটি বাইন্ডিংয়ে পাস হয় তা দেখার সহজ উপায় হ'ল কনসোলে ডেটা ফেলে দেওয়া:
<div data-bind="text: console.log($data)"></div>নকআউট পাঠ্য বাঁধার জন্য মানটি মূল্যায়ন করবে (যে কোনও বাঁধাই বাস্তবে এখানে ব্যবহার করা যেতে পারে ) এবং ব্রাউজার প্যানেলটি কনসোল করতে fl ডেটা ফ্লাশ করে।
অন্যান্য সমস্ত উত্তর দুর্দান্ত কাজ করবে, আমি যা করতে চাই তা যুক্ত করছি:
আপনার দৃষ্টিতে (ধরে নিলেন আপনি ইতিমধ্যে একটি ভিউমোডেলকে আবদ্ধ করেছেন):
<div data-bind="debugger: $data"></div>নকআউট কোড:
ko.bindingHandlers.debugger = {
init: function (element, valueAccessor) {
debugger;
}
}এটি ডিবাগারে কোডটি বিরতি দেবে elementএবং valueAccessor()এতে মূল্যবান তথ্য থাকবে।
আপনি যদি ভিজ্যুয়াল স্টুডিও এবং আই-তে বিকাশ করছেন তবে data-bind="somebinding:(function(){debugger; return bindvalue; })()"আমি এটিকে আরও পছন্দ করি তবে এটি প্রতিধ্বনি ফাংশন যেহেতু এটি স্ক্রিপ্টে সমস্ত বাইন্ডিংয়ের পরিবর্তে fileভাল ফাইলের সাথে যাবে এবং আপনি কেবলমাত্র $ প্রসঙ্গ $ ডেটা দেখতে পারেন (আমি ব্যবহার করি) এটি ক্রোমেও রয়েছে);