নকআউট জেএস-এ রেডিও বোতামগুলির কাছে সত্য / মিথ্যা বাঁধাই

Question 1

আমার ভিউ মডেলে আমার কাছে ইসমেল মান রয়েছে যা মানটি সত্য বা মিথ্যা।

আমার ইউআইতে আমি এটি নীচের রেডিও বোতামগুলিতে আবদ্ধ করতে চাই:

<label>Male
   <input type="radio" name="IsMale" value="true" data-bind="checked:IsMale"/>
</label> 
<label>Female
   <input type="radio" name="IsMale" value="false" data-bind="checked:IsMale"/>
</label>

আমি যে সমস্যাটি মনে করি তা checkedএকটি "সত্য" / "মিথ্যা" স্ট্রিংটি প্রত্যাশা করে। সুতরাং আমার প্রশ্নটি হল, আমি কীভাবে এই 2-উপায় বাঁধাই করতে পারি / এই ইউআই এবং মডেলটি?

Question 2

একটি বিকল্প হ'ল লিখনযোগ্য গণনা পর্যবেক্ষণযোগ্য ব্যবহার করা ।

এই ক্ষেত্রে, আমি মনে করি যে একটি দুর্দান্ত বিকল্প হ'ল লিখনযোগ্য গণনাকে পর্যবেক্ষণযোগ্য করে আপনার IsMaleপর্যবেক্ষণযোগ্য "উপ-পর্যবেক্ষণযোগ্য" করে তোলা । আপনার দেখার মডেলটি দেখতে এমন হবে:

var ViewModel = function() {
   this.IsMale = ko.observable(true);

   this.IsMale.ForEditing = ko.computed({
        read: function() {
            return this.IsMale().toString();  
        },
        write: function(newValue) {
             this.IsMale(newValue === "true");
        },
        owner: this        
    });          
};

আপনি আপনার ইউআইতে এটি আবদ্ধ করবেন:

<label>Male
   <input type="radio" name="IsMale" value="true" data-bind="checked:IsMale.ForEditing"/>
</label> 
<label>Female
   <input type="radio" name="IsMale" value="false" data-bind="checked:IsMale.ForEditing"/>
</label>

নমুনা: http://jsfiddle.net/rniemeyer/Pjdse/

Question 3

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

বর্তমানে এক্সটেন্ডার, কাস্টম বাইন্ডিং হ্যান্ডলার বা গণনার প্রয়োজন নেই। কেবল একটি "চেকডভ্যালু" বিকল্প সরবরাহ করুন, এটি এটি এইচটিএমএল 'মান' বৈশিষ্ট্যের পরিবর্তে ব্যবহার করবে এবং এর সাথে আপনি কোনও জাভাস্ক্রিপ্ট মান পাস করতে পারবেন।

<input type="radio" name="a" data-bind="checked:IsChecked, checkedValue: true"/>
<input type="radio" name="a" data-bind="checked:IsChecked, checkedValue: false"/>

বা:

<input type="radio" name="b" data-bind="checked:Quantity, checkedValue: 1"/>
<input type="radio" name="b" data-bind="checked:Quantity, checkedValue: 2"/>
<input type="radio" name="b" data-bind="checked:Quantity, checkedValue: 3"/>

Question 4

এটি আমার পক্ষে কাজ করে:

http://jsfiddle.net/zrBuL/291/

<label>Male
   <input type="radio" name="IsMale" value="1" data-bind="checked:IsMale"/>
</label> 
<label>Female
   <input type="radio" name="IsMale" value="0" data-bind="checked:IsMale"/>
</label>

Question 5

ko.bindingHandlers['radiobuttonyesno'] = {
    'init': function (element, valueAccessor, allBindingsAccessor) {
        var stateHandler = function (property, allBindingsAccessor, key, value, checkIfDifferent) {
            if (!property || !ko.isObservable(property)) {
                var propWriters = allBindingsAccessor()['_ko_property_writers'];
                if (propWriters && propWriters[key])
                    propWriters[key](value);
            } else if (ko.isWriteableObservable(property) && (!checkIfDifferent || property.peek() !== value)) {
                property(value);
            }
        };

        var updateHandler = function () {
            var valueToWrite;

            if ((element.type == "radio") && (element.checked)) {
                valueToWrite = element.value;
            } else {
                return; // "radiobuttonyesno" binding only responds to selected radio buttons
            }

            valueToWrite = (valueToWrite === "True") ? true : false;

            var modelValue = valueAccessor(), unwrappedValue = ko.utils.unwrapObservable(modelValue); //can be true of false

            stateHandler(modelValue, allBindingsAccessor, 'checked', valueToWrite, true);
        };
        ko.utils.registerEventHandler(element, "click", updateHandler);

        // IE 6 won't allow radio buttons to be selected unless they have a name
        if ((element.type == "radio") && !element.name)
            ko.bindingHandlers['uniqueName']['init'](element, function () { return true });
    },
    'update': function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());

        value = value ? "True" : "False";

        if (element.type == "radio") {
            element.checked = (element.value == value);
        }
    }
};

বোকা কো গণিত পর্যবেক্ষণগুলি তৈরির পরিবর্তে এই বাইন্ডারটি ব্যবহার করুন।

উদাহরণ:

<label>Male
        <input type="radio" name="IsMale" value="True" data-bind="radiobuttonyesno:IsMale"/>
     </label> 
     <label>Female
        <input type="radio" name="IsMale" value="False" data-bind="radiobuttonyesno:IsMale"/>
     </label>

Question 6

একবার আপনি যখন বুঝতে পারেন যে রেডিও বোতামের জন্য প্রাথমিক ম্যাচটি কেবল একটি স্ট্রিংয়ের সাথে মেলে এবং একটি স্ট্রিংয়ের মান সেট করতে চায়, এটি কেবল আপনার প্রাথমিক মানটিকে স্ট্রিংয়ে রূপান্তরিত করার বিষয়। আমি এটি ইন্টার মান সহ লড়াই করতে হয়েছিল।

আপনি আপনার পর্যবেক্ষণগুলি সেটআপ করার পরে, মানটিকে স্ট্রিংয়ে রূপান্তর করুন এবং কেও সেখান থেকে এর যাদুটি করবে। আপনি যদি পৃথক লাইনগুলির সাথে ম্যাপিং করে থাকেন তবে সেই লাইনে রূপান্তরটি করুন।

উদাহরণ কোডে, আমি জসনকে একটি একক কমান্ডে পুরো মডেলটি মানচিত্র করতে ব্যবহার করছি। তারপরে রেজারকে রূপান্তরটির জন্য উদ্ধৃতিগুলির মধ্যে মান সন্নিবেশ করিয়ে দেওয়া।

script type="text/javascript">
    KoSetup.ViewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));
    KoSetup.ViewModel.ManifestEntered("@Model.ManifestEntered");       //Bool
    KoSetup.ViewModel.OrderStatusID("@Model.OrderStatusID");           //Int
</script>

বিকাশের সময় আমি আমার ওয়েব পৃষ্ঠার নীচে একটি "স্ক্রিনে এটি ডাম্প" ব্যবহার করি।

<h4>Debug</h4>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

এখানে ডেটা মানগুলি আগে দেওয়া আছে

"OrderStatusID": 6,
"ManifestEntered": true,

এবং, পরে

"OrderStatusID": "6",
"ManifestEntered": "True",

আমার প্রকল্পে, আমাকে বুলগুলিকে রূপান্তর করতে হবে না, কারণ আমি এমন একটি চেকবক্স ব্যবহার করতে সক্ষম হয়েছি যাতে একই হতাশা না থাকে।

Question 7

কেন 1 এবং 0 এর পরিবর্তে কেবল সত্য এবং মিথ্যা নয়?

 <label>Male
    <input type="radio" name="IsMale" value="true" data-bind="checked:IsMale"/>
 </label> 
 <label>Female
    <input type="radio" name="IsMale" value="false" data-bind="checked:IsMale"/>
 </label>

Question 8

আপনি কোনও এক্সটেন্ডারও ব্যবহার করতে পারেন তাই আরও পর্যবেক্ষণযোগ্যদের জন্য এগুলি পুনরায় ব্যবহার করা সহজ:

ko.extenders.boolForEditing = function (target, allowNull) {
    var result = ko.computed({
        read: function () {
            var current = target();
            var newValue = null;
            if (current === undefined || current === null || current === '') {
                if (!allowNull) {
                    newValue = 'false';
                }
            } else {
                newValue = current ? 'true' : 'false';
            }
            return newValue;
        },
        write: function (newValue) {
            var current = target();
            var valueToWrite = null;
            if (newValue === undefined || newValue === null || newValue === '') {
                if (!allowNull) {
                    valueToWrite = false;
                }
            } else {
                valueToWrite = newValue === 'true';
            }
            // only write if it changed
            if (valueToWrite !== current) {
                target(valueToWrite);
            } else {
                if (newValue !== current) {
                    target.notifySubscribers(valueToWrite);
                }
            }
        }
    }).extend({
        notify: 'always'
    });

    result(target());

    return result;
};

তারপরে এটি ব্যবহার করুন:

this.IsMale.forEditing = this.IsMale.extend({boolForEditing: true});

boolForEditingমানটি নাল হতে পারে কিনা তা নির্দেশ করার জন্য প্রদত্ত প্যারামিটার ।

দেখুন http://jsfiddle.net/G8qs9/1/

Question 9

নকআউট এর পুরানো সংস্করণে 3.0 এর আগে অনেক গবেষণা করার পরে সম্ভবত দুটি সেরা বিকল্প রয়েছে

নকআউট এক্সটেন্ডার তৈরি করুন

ko.extenders["booleanValue"] = function (target) {
    target.formattedValue = ko.computed({
        read: function () {
            if (target() === true) return "True";
            else if (target() === false) return "False";
        },
        write: function (newValue) {
            if (newValue) {
                if (newValue === "False") target(false);
                else if (newValue === "True") target(true);
            }
        }
    });

    target.formattedValue(target());
    return target;
};

আপনার মডেলটিতে এক্সটেন্ডারটি ব্যবহার করতে, আপনি নিম্নলিখিতগুলির মতো কিছু করতে চাই:

function Order() {
  this.wantsFries= ko.observable(false).extend({ booleanValue: null });
}

<span>Do you want fries with that?</span>
<label>
  <input type="radio" name="question" value="True"
             data-bind="value: wantsFries.formattedValue" /> Yes
</label>
<label>
  <input type="radio" name="question" value="False"
             data-bind="value: wantsFries.formattedValue" /> No
</label>

উত্স: http://www.timlabonne.com/2013/02/building-a-knockout-js-extender-for-boolean-values/