ডেটা-বাউন্ড দর্শনগুলিতে কীভাবে অন্য-কাঠামো টেমপ্লেট করবেন?

Question 1

আমি ক্রমাগত নিজেকে কো-ভিত্তিক এইচটিএমএল টেম্পলেটগুলিতে এই আইডিয়ামটি ব্যবহার করে দেখতে পাই:

<!-- ko if: isEdit -->
<td><input type="text" name="email" data-bind="value: email" /></td>
<!-- /ko -->
<!-- ko ifnot: isEdit -->
<td data-bind="text: email"></td>
<!-- /ko -->

KO- এ শর্তসাপেক্ষে করার জন্য কি আরও ভাল / ক্লিনার কোন উপায় আছে, বা যদি অন্য নির্মাণগুলি কেবল traditionalতিহ্যবাহী ব্যবহারের চেয়ে আরও ভাল উপায় আছে ?

এছাড়াও, আমি কেবল এটিই উল্লেখ করতে চাই যে ইন্টারনেট এক্সপ্লোরারের কিছু সংস্করণ (IE 8/9) উপরের উদাহরণটিকে সঠিকভাবে পার্স করে না। আরও তথ্যের জন্য দয়া করে এই তাই প্রশ্ন দেখুন। দ্রুত সংক্ষিপ্তসারটি হ'ল, আইই সমর্থন করার জন্য টেবিল ট্যাগের ভিতরে মন্তব্য (ভার্চুয়াল বাইন্ডিং) ব্যবহার করবেন না। tbodyপরিবর্তে ব্যবহার করুন :

<tbody data-bind="if: display"><tr><td>hello</td></tr></tbody>

Question 2

কয়েকটি ধরণের বিভিন্ন উপায় রয়েছে যা আপনি এই ধরণের কোড পরিচালনা করতে পারেন।

আপনার মত একটি if / ifnot সংমিশ্রণ সহ। এটি সূক্ষ্মভাবে কাজ করে এবং ভয়াবহ ভারবস হয় না।
মাইকেল বেস্টের স্যুইচ / কেস বাইন্ডিং ( https://github.com/mbest/knockout-switch- کیس ) বেশ নমনীয় এবং আপনাকে সহজেই এই এবং আরও জটিল বিষয়গুলি পরিচালনা করতে দেয় (সত্য / মিথ্যার চেয়ে আরও বেশি রাজ্য)।
আর একটি বিকল্প গতিশীল টেম্পলেট ব্যবহার করা হয়। আপনি কোনও পর্যবেক্ষণের ভিত্তিতে টেমপ্লেটের নাম ব্যবহার করে একটি বা একাধিক টেম্পলেটগুলিতে একটি অঞ্চল আবদ্ধ করবেন। এখানে এই পোস্টটি লিখেছিলাম যা আমি কিছুক্ষণ আগে এই বিষয়টিতে লিখেছিলাম: http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html । আপনার দৃশ্যে, এটি দেখতে দেখতে এমন হতে পারে:

<td data-bind="template: $root.getCellTemplate"></td>

<script id="cellEditTmpl" type="text/html">
    <input type="text" name="email" data-bind="value: email" />
</script>

<script id="cellTmpl" type="text/html">
    <span data-bind="text: email"></span>
</script>

getCellTemplateফাংশন যেখানেই বাস পারে, কিন্তু প্রথম আর্গুমেন্ট হিসাবে আইটেম ($ তথ্য) দেওয়া হবে এবং ব্যবহার টেমপ্লেটের নাম ফিরে আসবে।

Question 3

একটি পদ্ধতি হ'ল নামযুক্ত টেম্পলেটগুলি ব্যবহার করা (যা উত্তীর্ণ তর্কগুলি সমর্থন করতে পারে):

<!-- ko template: isEdit() ? 'emailEdit' : 'emailDisplay' --><!-- /ko -->
<script id="emailEdit" type="text/html">
    <td><input type="text" name="email" data-bind="value: email" /></td>
</script>
<script id="emailDisplay" type="text/html">
    <td data-bind="text: email"></td>
</script>

অন্য বিকল্পটি হ'ল আমার স্যুইচ / কেস প্লাগইনটি ব্যবহার করুন যা এটির মতো কাজ করবে:

<!-- ko switch -->
    <!-- ko case: isEdit -->
        <td><input type="text" name="email" data-bind="value: email" /></td>
    <!-- /ko -->
    <!-- ko case: $else -->
        <td data-bind="text: email"></td>
    <!-- /ko -->
<!-- /ko -->

Question 4

If: / ifnot: এর সংমিশ্রণটি ব্যবহার করার সময় নকআউট বাইন্ডিংয়ের পুনঃব্যবস্থাপনা এড়াতে আপনি এগুলি 'সাথে:' নির্মাণের সাথে ব্যবহার করতে পারেন

    <!-- ko with: $data.DoSomePerformanceCriticalWork($data.SomeParameter()) -->
        <!-- ko if: $data.Condition() -->
           ... some markup ...
        <!-- /ko -->
        <!-- ko ifnot: $data.Condition() -->
           ... some markup ...
        <!-- /ko -->
    <!-- /ko -->

Question 5

knockout-elseবাঁধাই / প্লাগইন এখন রয়েছে (যে আমি এই সমস্যাটির সমাধান করতে লিখেছিলাম)।