淘汰js订阅以选择列表selected选项反复显示未定义

Question

I have I drop down list prepopulated with a list of strings. My select list binding is like so:

<select id="industryDropDown"
    data-bind="options: $root.orgIndustrySuggestions, value: $root.selectedIndustryTag, optionsCaption: ''"></select>

In my viewmodel I have this:

self.selectedIndustryTag.subscribe(function (newValue) {
    if (newValue !== '') {
        if (newValue !== 'undefined')
            {
        alert(self.selectedIndustryTag());
        self.selectedIndustryTag('');
        }
    }
}, self);

I am trying to get the selected value from the drop down list, do something where the alert() is now, and then reset the selected value to the default empty string option.

Currently when I run this, page load is fine. But when I select something it will show me the selected value the first time, but them throw up a kajillion (i counted) alerts saying 'undefined' after that.

Answer 1

You are over complicating your logic for one. Create a fiddle demonstrating your error and we could probably show you why, but in a nutshell you have a recursive loop (you are subscribing to a value and setting it inside of that function) and you are also testing multiple times when you don't need to -

self.selectedIndustryTag.subscribe(function (newValue) {
    if (newValue) {
        alert(self.selectedIndustryTag());
         // The next line will refire the subscription
         //self.selectedIndustryTag('');
    }
}, self);

The conditional statement - if (newValue) will test whether newValue equals null, undefined, false, or string empty ('')

Answer 2

_{Was that exactly a kajillion? or was it more like ten bajillion?}

The reason you have this problem is that you're entering an endless loop. A change to selectedIndustryTag in the UI raises the subscribe. Inside the subscribe you change selectedIndustryTag which raises the subscribe which changes the selectedIndustryTag which.... well you probably get the point.

The way to resolve this is to have 2 properties. The live one edited by the UI, which you can subscribe to, and a second one which you use internally (which the subscribe can update).

Another issue you have, you're using strict non-equality operator !== but comparing to the string 'undefined' . That will never evaluate as you should be comparing against undefined (without quotes).

so change

if (newValue !== 'undefined')

to

if (newValue !== undefined)

Live example: http://jsfiddle.net/2NqFY/