আমি কীভাবে হারিয়ে ফোকাসের পরিবর্তে কীপ্রেসে ডেটা-বাইন্ডে নকআউট জেএস পেতে পারি?


191

নকআউট জেএস এর এই উদাহরণটি তাই কাজ করে যখন আপনি কোনও ক্ষেত্র সম্পাদনা করবেন এবং টিএবি টিপুন, ভিউমডেল ডেটা এবং সেইজন্য ক্ষেত্রগুলির নীচের পাঠ্যটি আপডেট করা হবে।

আমি কীভাবে এই কোডটি পরিবর্তন করতে পারি যাতে ভিউ মডেল ডেটা প্রতিটি কীপ্রেস আপডেট হয়?

বিকল্প পাঠ

<!doctype html>
<html>
    <title>knockout js</title>
    <head>
        <script type="text/javascript" src="js/knockout-1.1.1.debug.js"></script>
        <script type="text/javascript">
        window.onload= function() {

            var viewModel = {
                firstName : ko.observable("Jim"),
                lastName : ko.observable("Smith")
            };
            viewModel.fullName = ko.dependentObservable(function () {
                return viewModel.firstName() + " " + viewModel.lastName();
            });

            ko.applyBindings(viewModel);
       }
        </script>
    </head>
    <body>
        <p>First name: <input data-bind="value: firstName" /></p>
        <p>Last name: <input data-bind="value: lastName" /></p>
        <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
    </body>
</html>

9
কেও 3.2 এ এই সমস্ত কাজের ক্ষেত্রগুলি
সালভাদোর ডালি

সালভাদোর সঠিক - এটি সর্বশেষতম সংস্করণে এটি স্বয়ংক্রিয়ভাবে হয়।
vapcguy

উত্তর:


299
<body>
        <p>First name: <input data-bind="value: firstName, valueUpdate: 'afterkeydown'" /></p>
        <p>Last name: <input data-bind="value: lastName, valueUpdate: 'afterkeydown'" /></p>
        <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
</body>

ডকুমেন্টেশন থেকে

অতিরিক্ত পরামিতি

  • valueUpdate

    যদি আপনার বাইন্ডিংয়েও মান আপডেট নামে একটি প্যারামিটার অন্তর্ভুক্ত থাকে, তবে এটি নির্ধারণ করে যে পরিবর্তনগুলি সনাক্ত করতে ব্রাউজার ইভেন্ট কেও ব্যবহার করা উচিত। নিম্নলিখিত স্ট্রিং মানগুলি সর্বাধিক কার্যকর দরকারী পছন্দ:

    • "পরিবর্তন" (ডিফল্ট) - ব্যবহারকারী যখন কোনও পরিবর্তনের সাথে সাথেই কোনও আলাদা নিয়ন্ত্রণে বা উপাদানগুলির ক্ষেত্রে ফোকাসটি সরিয়ে দেয় তখন আপনার ভিউ মডেলটি আপডেট করে

    • "কীআপ" - যখন ব্যবহারকারী কোনও কী ছেড়ে দেয় তখন আপনার ভিউ মডেলটি আপডেট করে

    • "কীপ্রেস" - ব্যবহারকারী কোনও কী টাইপ করলে আপনার ভিউ মডেল আপডেট করে। কীআপের বিপরীতে, ব্যবহারকারীরা কী ধরে রাখার সময় এই আপডেটগুলি বারবার আপডেট হয় updates

    • "আফটারকিডাউন" - ব্যবহারকারী কোনও চরিত্র টাইপ করা শুরু করার সাথে সাথে আপনার ভিউ মডেলটিকে আপডেট করে। এটি ব্রাউজারের কীডাউন ইভেন্টটি ধরার মাধ্যমে এবং ইভেন্টটিকে অবিচ্ছিন্নভাবে পরিচালনা করে কাজ করে।

এই বিকল্পগুলির মধ্যে, "আফটারকিডাউন" হ'ল সেরা পছন্দ যদি আপনি রিয়েল-টাইমে আপনার ভিউ মডেলটি আপডেট রাখতে চান।


9
নকআউট.জেএস-এ ডক্স থেকে: // সিন্টেক্সটি "<< উদ্ভাবনী>" এর পরে "হ্যান্ডলারটি ইভেন্টের পরে অবিচ্ছিন্নভাবে চালান" // এটি দরকারী, উদাহরণস্বরূপ, ব্রাউজারটি নিয়ন্ত্রণ আপডেট করার পরে "কীডাউন" ইভেন্টগুলি ধরার জন্য
জন রাইট

4
মান আছে কী কী আছে আপডেট: 'আফটারকিডাউন' ডিফল্ট হতে ?
অ্যারন শাফোওয়ালফ

2
কিছু ইনপুট বাক্সের জন্য ব্রাউজারটি "অটো-পপুলেট" মানগুলি দেখায় (যেমন যদি ইনপুট ক্ষেত্রটির নাম "প্রথম নাম" দেওয়া হয়)। অটো-পপুলেট থেকে নির্বাচন করা "আফটারকিডাউন" এর সাথে কাজ করে না। এটি ধরার কোন উপায় আছে?
আন্তন

2
@ অ্যান্টন অটো-পপুলেটেড মানগুলির পাশাপাশি, অন-স্ক্রীন কীবোর্ড ক্লিক এবং মাউস পেস্ট ইভেন্টগুলি রয়েছে যা ধরা উচিত। ব্যবহার afterkeydownকরা একটি খারাপ সমাধান।
জন কুর্লক

2
এই উত্তরের লেখক, দয়া করে সালভাদোর ডালির জবাব অন্তর্ভুক্ত করার জন্য আপডেট করুন, ৩.২ হিসাবে টেক্সটইনপুট যুক্ত করা একটি ভাল সমাধান কারণ এতে মোবাইল ব্রাউজারগুলির সাথে আরও ভাল সামঞ্জস্যতা রয়েছে (অটো সম্পূর্ণরূপে কাজের মতো জিনিস)
মাইকেল ক্রুক

85

ইন সংস্করণ 3.2 আপনি কেবল ব্যবহার করতে পারেন বাঁধাই textinput। :

<input data-bind="textInput: userName" />

এটি দুটি গুরুত্বপূর্ণ কাজ করে:

  • তাত্ক্ষণিক আপডেট করুন
  • কাটা, টেনে আনুন, স্বতঃপূরণ ...

সুতরাং অতিরিক্ত মডিউল, কাস্টম নিয়ন্ত্রণ এবং অন্যান্য জিনিসগুলির প্রয়োজন নেই।


এটি সত্যিই ভালভাবে কাজ করে এবং মানটি প্রতিস্থাপনের জন্য ঠিক আমার প্রয়োজন: ফিল্ড, মান আপডেট: আমার অ্যাপ্লিকেশনটির মাধ্যমে আমার যা কিছু ছিল 'ইনপুট পরিবর্তন' ... ধন্যবাদ thanks
টড থমসন

কোনও ব্যবহারকারী যখন নতুন এইচটিএমএল 5 অনুসন্ধান ইনপুট ক্ষেত্রে 'এক্স' আইকনটিতে ক্লিক করেন এবং ইনপুটটি খালি থাকে তেমন কাজ করে তখন কি ইভেন্টটি ক্যাপচার করার কোনও উপায় আছে?
কোড্রিনা ভালো

35

আপনি যদি এটি afterkeydown"ডিফল্টরূপে" আপডেট করতে চান তবে আপনি বাইন্ডিং হ্যান্ডলারের valueUpdateমধ্যে বাইন্ডিংটি ইনজেক্ট করতে পারেন value। একটি নতুন সরবরাহ allBindingsAccessorব্যবহারের হ্যান্ডলার রয়েছে যা অন্তর্ভুক্ত জন্য afterkeydown

(function () {
    var valueHandler = ko.bindingHandlers.value;
    var getInjectValueUpdate = function (allBindingsAccessor) {
        var AFTERKEYDOWN = 'afterkeydown';
        return function () {
            var allBindings = ko.utils.extend({}, allBindingsAccessor()),
                valueUpdate = allBindings.valueUpdate;

            if (valueUpdate === undefined) {
                return ko.utils.extend(allBindings, { valueUpdate: AFTERKEYDOWN });
            } else if (typeof valueUpdate === 'string' && valueUpdate !== AFTERKEYDOWN) {
                return ko.utils.extend(allBindings, { valueUpdate: [valueUpdate, AFTERKEYDOWN] });
            } else if (typeof valueUpdate === 'array' && ko.utils.arrayIndexOf(valueUpdate, AFTERKEYDOWN) === -1) {
                valueUpdate = ko.utils.arrayPushAll([AFTERKEYDOWN], valueUpdate);
                return ko.utils.extend(allBindings, {valueUpdate: valueUpdate});
            }
            return allBindings;
        };
    };
    ko.bindingHandlers.value = {
        // only needed for init
        'init': function (element, valueAccessor, allBindingsAccessor) {
            allBindingsAccessor = getInjectValueUpdate(allBindingsAccessor);
            return valueHandler.init(element, valueAccessor, allBindingsAccessor);
        },
        'update': valueHandler.update
    };
} ());

আপনি যদি এই valueবাইন্ডিংটিকে "ওভাররাইডিং" করতে স্বাচ্ছন্দ্য বোধ করেন না , তবে আপনি ওভাররাইডিং কাস্টমকে বাইন্ডিংয়ের আলাদা নাম দিতে পারেন এবং সেই বাইন্ডিং হ্যান্ডলারটি ব্যবহার করতে পারেন।

ko.bindingHandlers.realtimeValue = { 'init':..., 'update':... };

ডেমো

এর মতো সমাধান নকআউট সংস্করণ ২.x এর জন্য উপযুক্ত হবে। নকআউট টিম নকআউট সংস্করণ 3 এবং তারপরে পাঠ্য ইনপুট বাইন্ডিংয়ের মাধ্যমে পাঠ্য-মতো ইনপুটগুলির জন্য আরও একটি সম্পূর্ণ বাঁধাইয়ের কাজ করেছে । এটি পাঠ্য ইনপুটগুলির জন্য সমস্ত পাঠ্য ইনপুট পদ্ধতিগুলি হ্যান্ডেল করার জন্য ডিজাইন করা হয়েছিল textarea। এমনকি রিয়েল টাইম আপডেট করাও পরিচালনা করবে যা কার্যকরভাবে এই পদ্ধতির অচল করে দেয়।


2
এইভাবে আমার মার্কআপটি সামান্য পরিপাটি করে। এছাড়াও, 'আফটারকিডাউন' ছাড়াও, 'ইনপুট' এবং 'পেস্ট' ইভেন্টগুলি পেস্ট / ড্র্যাগ-ও-ড্রপ ক্রিয়াকলাপগুলিতে যোগ করা যেতে পারে।
বব

উপরের সমাধানটিতে আমি মনে করি যে "টাইপফুল মান" আপডেটেড === 'অ্যারে' "" অবজেক্ট.প্রোটোটাইপ.টোস্ট্রিং.ক্লোল (ভ্যালুআপডেট) === '[অবজেক্ট অ্যারে]' "দিয়ে প্রতিস্থাপন করা দরকার। দেখুন stackoverflow.com/questions/4775722/...
daveywc

20

জেফ মার্কাডোর উত্তর চমত্কার, তবে দুর্ভাগ্যক্রমে নকআউট 3 এর সাথে ভাঙা।

তবে আমি নকআউট 3 পরিবর্তনের মাধ্যমে কাজ করার সময় কো দেবগণের দ্বারা প্রস্তাবিত উত্তরটি পেয়েছি। নীচের মন্তব্যগুলি https://github.com/knockout/knockout/pull/932 এ দেখুন । তাদের কোড:

//automatically add valueUpdate="afterkeydown" on every value binding
(function () {
    var getInjectValueUpdate = function (allBindings) {
        return {
            has: function (bindingKey) {
                return (bindingKey == 'valueUpdate') || allBindings.has(bindingKey);
            },
            get: function (bindingKey) {
                var binding = allBindings.get(bindingKey);
                if (bindingKey == 'valueUpdate') {
                    binding = binding ? [].concat(binding, 'afterkeydown') : 'afterkeydown';
                }
                return binding;
            }
        };
    };

    var valueInitHandler = ko.bindingHandlers.value.init;
    ko.bindingHandlers.value.init = function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        return valueInitHandler(element, valueAccessor, getInjectValueUpdate(allBindings), viewModel, bindingContext);
    };
}());

http://jsfiddle.net/mbest/GKJnt/

কো 3.2.0 সম্পাদনা করুন এখন নতুন "টেক্সটইনপুট" বাঁধাইয়ের সাথে আরও একটি সম্পূর্ণ সমাধান রয়েছে। সালভিডরডালির উত্তর দেখুন


1
উত্তরটি 3.0 এ আপডেট করার জন্য ধন্যবাদ!
গ্রাহাম টি

@ গ্রাহাম্ট কেও ৩.২-তে আপনার প্রয়োজনও নেই। এটি কেবল একটি লাইন
সালভাদোর ডালি

আমাদের কেও ৩.২-তে যারা খুব ভাল লেগেছে যারা আমরা শুরু করার সময় টেক্সটইনপুট সম্পর্কে জানতাম না এবং পুরো সিস্টেমে প্রতিটি ইনপুট আপডেট করতে পারে না!
cscott530
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.