কোনও বুলিয়ান ভিউমোডাল সম্পত্তিটির উপেক্ষা ("!") এর জন্য ডেটা-বাঁধাই করা সম্ভব?

Question

আমি আমার ভিউমোডেলে একটি বিযুক্তির পৃথক গণনা করা সম্পত্তি তৈরি না করে কোন আইকনটি প্রদর্শন করতে হবে তা টগল করতে একটি সম্পত্তি ব্যবহার করতে চাই। এটা কি সম্ভব?

<tbody data-bind="foreach: periods">
  <tr>
    <td>
      <i class="icon-search" data-bind="visible: !charted, click: $parent.pie_it"></i>
      <i class="icon-remove" data-bind="visible: charted, click: $parent.pie_it"></i>
    </td>
  </tr>
</tbody>

আমার ভিউমোডেলের একটি সম্পত্তি পিরিয়ড রয়েছে যা মাসের অ্যারে যেমন:

var month = function() {
    this.charted = ko.observable(false);
};

Comments

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

— অলিভার

Answer 1

একটি অভিব্যক্তিতে একটি পর্যবেক্ষণযোগ্য ব্যবহার করার সময় আপনাকে এটির মতো ক্রিয়াকলাপ হিসাবে এটি অ্যাক্সেস করতে হবে:

visible: !charted()

Comments

হতে পারে আমাদের একটি লুকানো বাঁধাই করা উচিত :) আমরা সক্ষম এবং অক্ষম করেছি।

— জন পাপা

ডকুমেন্টেশনটি কি এর সাথে একমত নয় বা আমি কি এই পৃষ্ঠাটিকে সম্পূর্ণ ভুল বুঝছি

— শয়তানের অ্যাডভোকেট

কিছু মনে করি না, আমার ধারণা "isSevere" কোনও পর্যবেক্ষণযোগ্য নয় বরং একটি সাধারণ পুরানো সম্পত্তি, সুতরাং আমার বিভ্রান্তি।

— ডেভিলের অ্যাডভোকেট

চার্টেড ব্যবহার করার সময়, আপনি পাচ্ছেন! [ফাংশন]। [ফাংশন] সত্য,! [ফাংশন] মিথ্যা হয়ে যায় এবং আপনি যদি এই সিনট্যাক্সটি ব্যবহার করেন তবে সর্বদা মিথ্যা হবে। jsfiddle.net/datashaman/E58u2/3

— দতাশমন

তারা আসলে v3.5.0 এhidden বাঁধাই যুক্ত করেছে

— গ্রিন ২

Answer 2

আমি জন পপির এই মন্তব্যে একমত যে একটি অন্তর্নির্মিত hiddenবাইন্ডিং হওয়া উচিত । একটি উত্সর্গীকৃত hiddenবাঁধাইয়ের দুটি সুবিধা রয়েছে :

1. সরল বাক্য গঠন, যেমন। hidden: chartedপরিবর্তে visible: !charted()।
2. কম সংস্থান, যেহেতু নকআউট পর্যবেক্ষণের ব্যবস্থা chartedতৈরির পরিবর্তে সরাসরি পর্যবেক্ষণযোগ্য পর্যবেক্ষণ করতে computedপারে !charted()।

একটি hiddenবাঁধাই তৈরি করতে এটি যথেষ্ট সহজ , যদিও এর মতো:

ko.bindingHandlers.hidden = {
  update: function(element, valueAccessor) {
    ko.bindingHandlers.visible.update(element, function() {
      return !ko.utils.unwrapObservable(valueAccessor());
    });
  }
};

আপনি এটি বিল্ট-ইন visibleবাইন্ডিংয়ের মতোই ব্যবহার করতে পারেন :

<i class="icon-search" data-bind="hidden: charted, click: $parent.pie_it"></i>
<i class="icon-remove" data-bind="visible: charted, click: $parent.pie_it"></i>

Comments

এটি আমার পক্ষে ফিরে ছাড়া কাজ করে নিreturn !ko.utils.unwrapObservable(valueAccessor());

— মেহমেট আতাş

ধন্যবাদ @ মেহমেটআটাş - hiddenআপনার মন্তব্য অনুসারে আমি বাইন্ডিং সংশোধন করেছি । (বিটিডাব্লু, আমি মূলত পোস্ট করার সময় আমার প্রকল্পে কফি স্ক্রিপ্টটি ব্যবহার করছিলাম C কফির স্ক্রিপ্টের বাক্য গঠনটি প্রত্যাবর্তন ইচ্ছাকৃত হলে তা সুস্পষ্ট করে না))

— ডেভ

Answer 3

এটি আপনাকে কিছুটা বিভ্রান্তিকর করতে হবে

visible:!showMe()

তাই আমি

<span data-bind="visible:showMe">Show</span>
<span data-bind="visible:!showMe()">Hide</span>
<label><input type="checkbox" data-bind="checked:showMe"/>toggle</label>​

আমার মডেল হয়

var myModel={
    showMe:ko.observable(true)
}
ko.applyBindings(myModel);    

ফ্রেডে চেক করুন http://jsfiddle.net/khanSharp/bgdbm/

Answer 4

আপনি আমার সুইচ / কেস বাইন্ডিং ব্যবহার করতে পারেন , যার মধ্যে রয়েছে case.visibleএবং casenot.visible।

<tbody data-bind="foreach: periods">
    <tr>
        <td data-bind="switch: true">
        <i class="icon-search" data-bind="case.visible: $else, click: $parent.pie_it"></i>
        <i class="icon-remove" data-bind="case.visible: charted, click: $parent.pie_it"></i>
        </td>
    </tr>
</tbody>

আপনি এটি হিসাবে থাকতে পারে

        <i class="icon-search" data-bind="casenot.visible: charted, click: $parent.pie_it"></i>
        <i class="icon-remove" data-bind="case.visible: $else, click: $parent.pie_it"></i>

Comments

আমি কেবল বুঝতে পেরেছি যে এটি একটি পুরানো প্রশ্ন তবে আশা করি এটি কারও পক্ষে কার্যকর হতে পারে।

— মাইকেল সেরা

Answer 5

সম্পত্তিটিতে পরিবর্তন সম্পর্কে বাধ্যতামূলক সচেতন করার জন্য, আমি দৃশ্যমান বাইন্ডিং হ্যান্ডলারটি অনুলিপি করে এটিকে উল্টে দিয়েছি:

ko.bindingHandlers.hidden = {
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var isCurrentlyHidden = !(element.style.display == "");
        if (value && !isCurrentlyHidden)
            element.style.display = "none";
        else if ((!value) && isCurrentlyHidden)
            element.style.display = "";
    }
};

Answer 6

দাবি অস্বীকার: এই সমাধানটি শুধুমাত্র বিনোদনমূলক উদ্দেশ্যে।

ko.extenders.not = function (target) {
    target.not = ko.computed(function () {
        return !target();
    });
};

self.foo = ko.observable(true).extend({ not: null });

<div data-bind="text: foo"></div>     <!-- true -->
<div data-bind="text: foo.not"></div> <!-- false -->

<!-- unfortunately I can't think of a way to be able to use:
    text: foo...not
-->

Answer 7

বুলিয়ান পর্যবেক্ষণযোগ্যের বিপরীতটি কীভাবে ব্যবহার করতে হয় সে সম্পর্কে আমার একই সমস্যা ছিল। আমি একটি সহজ সমাধান পেয়েছি:

var ViewModel = function () {
var self = this;

// When program start, this is set to FALSE
self.isSearchContentValid = ko.observable(false);


self.gatherPlacesData = function () {

   // When user click a button, the value become TRUE
   self.isSearchContentValid(true);

};

এখন আপনার এইচটিএমএলে আপনার এটি করা উচিত

<p data-bind = "visible:isSearchContentValid() === false"> Text 1</p>
<p data-bind = "visible:isSearchContentValid"> Text 2</p>

যখন প্রোগ্রামটি শুরু হয় কেবল তখন "পাঠ্য 1" দৃশ্যমান হয় কারণ "মিথ্যা === মিথ্যা সত্য" এবং পাঠ্য 2 দৃশ্যমান হয় না।

আসুন আমাদের বলুন যে আমাদের কাছে একটি বোতাম রয়েছে যা ক্লিক ইভেন্টে প্লেস ডেটা সংগ্রহের আহ্বান জানায়। এখন পাঠ্য 1 দৃশ্যমান হবে না কারণ "সত্য === মিথ্যাটি মিথ্যা" এবং পাঠ্য 2 কেবলমাত্র দৃশ্যমান হয়।

আর একটি সম্ভাব্য সমাধান গণিত পর্যবেক্ষণযোগ্য ব্যবহার করা হতে পারে তবে, আমি মনে করি এত সহজ সমস্যার জন্য একটি অতি-জটিল সমাধান।

Answer 8

এছাড়াও এটি লুকানো ব্যবহার করতে পারেন :

 <div data-bind="hidden: isString">
                            <input type="text" class="form-control" data-bind="value: settingValue" />
                        </div>